/* LATENTLAB
   Direction: "The printed annual" (seed 84136862), composition kept.
   Palette and type overridden from the user's supplied references:
   red / near-black / sand, condensed grotesk poster voice. */

:root {
  --bg: #121212;
  --ink: #EDE1D3;
  --muted: #9d968c;
  --accent: #EE2324;
  --accent-ink: #0a0a0a;
  --sand: #EDE1D3;
  --sand-ink: #1a1a1a;
  --sand-muted: #5d574e;
  --surface: #1c1c1c;
  --comfy: #c3cf00;
  --accent-text: #ff5248;

  --step-small: clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem);
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-title: clamp(1.75rem, 1.1rem + 2.1vw, 2.75rem);

  --gap: 8px;
  --margin: clamp(16px, 2vw, 32px);
  /* Anton carries a left side bearing that grows with the type size, so big
     lines look indented against small ones set to the same edge. Pulling back
     by a FRACTION OF AN EM corrects every size by the same optical amount. */
  --ink-fix: -0.046em;
  --axis: 42%;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  /* the splash is exactly one screen; it must never become a scrolling page */
  overflow: hidden;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.55;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.02; }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   THE POSTER
   ============================================================ */

.poster {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--margin) var(--margin) calc(var(--margin) * 1.2);
}

.poster-media { position: absolute; inset: 0; z-index: 0; }
/* IT KEEPS ITS COLOUR NOW. This was grayscale(1) with the contrast and
   brightness pulled underneath it, and the desk preview gave away what the
   footage actually looks like - red liquid in the flasks, which is the house
   palette the tile pictures are built on: near-black, warm sand, and exactly
   one red. Babe: "i kind of like this color version tho". The grade stays,
   because the type sits on top of this and needs the picture held down.

   AND IT NAMES BOTH ELEMENTS. The rule said "video" alone, so ?still=1 - which
   swaps in the poster frame for the preview - was drawing an ungraded
   picture, and the preview stopped being a preview. */
.poster-media video,
.poster-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) brightness(0.82) saturate(0.92);
}
/* the one allowed scrim: keeps the bill legible over the film */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 18, 18, 0.46);
  pointer-events: none;
}

.poster-nav, .poster-bill, .poster-word { position: relative; z-index: 5; }

/* The whole poster is one link. It sits over everything so a click anywhere
   goes to the lab, and it carries the pointer cursor across the page. */
.poster-hit { position: absolute; inset: 0; z-index: 6; }
/* ...except the call to action, which stays on top so it can still be hovered
   as a thing in its own right. It leads to the same place either way. */
.poster-go { position: relative; z-index: 7; }
.poster-meta { z-index: 5; }

.poster-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
}
.mark {
  margin-left: var(--ink-fix);
  font-family: Anton, Archivo, sans-serif;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* THE CROSS IS CENTRED ON THE NAMES, NOT ALIGNED WITH THEM. All three lines
   are blocks inside a column flex, so the bill stretched the full width of
   the poster and every one of them started at the left margin - which put
   the x 62px left of the middle at 1440 and 43px at 960, reading as a third
   line that had simply been cut short rather than as a mark between two
   names. `align-self: flex-start` shrinks the bill to the widest NAME,
   which is the span the cross divides, so one `text-align: center` lands
   it without anything having to know how long a handle is. */
.poster-bill {
  margin-top: clamp(28px, 5vh, 64px);
  max-width: none;
  align-self: flex-start;
}
/* A NAME RUNS LONGER BEFORE IT BREAKS, AND SITS TIGHTER. Babe: "make it so
   them can be a little longer before it starts a new line. and less line
   height." Both are the same lever read two ways - the type was set at up to
   2.75rem, which is a lot of width per character on a name that has to share
   the poster with a backdrop, and 1.02 of leading on a two-line stack of caps
   reads as two separate facts rather than one billing. */
.bill-name {
  margin-left: var(--ink-fix);
  font-family: Anton, Archivo, sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.7vw, 2.3rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
}
/* AND THE CROSS CAME BACK TO THE LEFT. Babe: "move the x back to the left
   side a little bigger but move it up a bit so its centered vertically
   between ARTISTS." It was centred across the bill, which put it under the
   middle of whichever name happened to be longer - a mark that moves when a
   name changes length is not a mark between two things.

   THE INK-FIX IS BACK WITH IT, for the reason it was taken off: that margin
   pulls Anton's left bearing out to the page margin, which is wrong for a
   CENTRED glyph with no bearing to pull and right for one lined up under the
   names.

   AND ITS OWN LINE IS SHORTER THAN THE TYPE IN IT, which is what centres it
   between the two names rather than hanging it off the top of its line box.
   Measured against the gap it sits in rather than guessed. */
.bill-vs {
  text-align: left;
  margin-left: var(--ink-fix);
  font-family: Anton, Archivo, sans-serif;
  text-transform: uppercase;
  /* BIGGER THAN THE NAMES' OWN SIZE WOULD SUGGEST, because the x in Anton
     is a small mark in a large em - the old rule set it at the names' 2.75rem
     and it still drew as a speck. Size and SPACE are set separately here for
     that reason: the font makes the mark, the line box makes the gap. */
  font-size: clamp(1.75rem, 3.6vw, 3.15rem);
  /* A LINE BOX A LITTLE SHORTER THAN THE TYPE IN IT. At 0.62 the three
     lines closed up until the cross touched both names - centred, by
     measurement, and visibly wrong, because what the eye reads is the INK
     and what a line box centres is itself. */
  line-height: 0.92;
  /* AND THE INK IS NUDGED UP, because an x sits near the BASELINE and a
     line box centres itself - which put the mark 12px low in a 40px gap
     and read as belonging to the name under it. The two margins cancel,
     so the stack is the same height and only the mark moves. */
  margin-top: -0.12em;
  margin-bottom: 0.12em;
  letter-spacing: -0.01em;
  color: var(--accent-text);
}

.poster-meta {
  position: absolute;
  top: var(--margin);
  right: var(--margin);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: right;
  max-width: 20ch;
}
.poster-meta dt { font-size: var(--step-small); font-weight: 600; color: var(--accent-text); text-transform: uppercase; }
/* ALL CAPS, like the labels over them. Babe: "all caps too on the side".
   The column is four words wide and set in 11px Oswald - caps give it one
   silhouette instead of two, and the labels were already shouting. */
.poster-meta dd {
  margin: 0; font-size: var(--step-small); font-weight: 600; line-height: 1.35;
  text-transform: uppercase;
}

/* Sits under the lockup, on the same left edge. */
.poster-go {
  align-self: flex-start;
  margin-top: 0.12em;
  display: inline-block;
  text-decoration: none;
  color: var(--accent-text);
  text-transform: uppercase;
  transition: color 220ms var(--ease);
}
.poster-go:hover { color: var(--sand); }

/* The lockup is the poster now. Every line is Anton at one size, so the stack
   rescales together and the lines cannot drift apart. */
.poster-word {
  font-family: Anton, Archivo, sans-serif;
  text-transform: uppercase;
  margin-top: auto;
  font-size: min(11vw, 20vh);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--sand);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.word-sub { font-size: 1em; margin-left: var(--ink-fix); }
.word-live { color: var(--accent-text); }

/* A short window has less to give the stack than a wide one implies. Capping
   only here keeps a 1080p screen at full size instead of shrinking everyone. */
@media (max-height: 700px) {
  .poster-word { font-size: min(11vw, 18vh); }
  .poster-bill { margin-top: clamp(12px, 2vh, 28px); }
}

/* The call to action belongs to the lockup: same face, same left edge. */
.poster-go {
  font-family: Anton, Archivo, sans-serif;
  /* vw, not em: this is a SIBLING of the lockup, so an em here would resolve
     against body text and come out at label size. Kept to the same ratio. */
  font-size: min(3.3vw, 6vh);
  line-height: 1;
  letter-spacing: 0.005em;
  margin-left: var(--ink-fix);
}

/* ============================================================
   MOTION
   ============================================================ */

.shutter video, .shutter img { clip-path: inset(0 100% 0 0); transform: scale(1.12); }
.shutter.is-open video, .shutter.is-open img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 1100ms var(--ease), transform 1400ms var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.poster-nav    { animation: rise 640ms var(--ease) both; }
.poster-bill   { animation: rise 760ms var(--ease) both; animation-delay: 140ms; }
.poster-meta   { animation: rise 760ms var(--ease) both; animation-delay: 220ms; }
.poster-go     { animation: rise 760ms var(--ease) both; animation-delay: 300ms; }
.poster-word   { animation: rise 900ms var(--ease) both; animation-delay: 380ms; }

[data-rise] { opacity: 0; transform: translateY(24px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .shutter video, .shutter img { clip-path: inset(0 0 0 0); transform: none; }
  [data-rise] { opacity: 1; transform: none; }
}

/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 900px) {
  .poster { min-height: 92svh; }
  .poster-meta {
    position: static;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 22px;
    max-width: none;
    margin-top: 28px;
  }
  .poster-go { margin-top: 20px; }  /* no longer a circle, so no fixed width */
  .bill-name { font-size: clamp(1.25rem, 4.2vw, 1.9rem); }
  /* AND THE CROSS IS SET BIGGER HERE TOO. It shared the names' size in this
     rule, which is the mistake the rule above already names: the x in Anton
     is a SMALL MARK IN A LARGE EM, so at an equal font-size it draws
     visibly smaller than a letter beside it. Babe: "can we make the x a
     little bigger between the artists." The ratio is the one the stacked
     bill uses, so the mark reads the same weight in both layouts. */
  .bill-vs { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  .poster-word { font-size: min(15vw, 20vh); margin-top: 56px; }
  .word-sub { font-size: 1em; }
  .poster-go { font-size: 5vw; }
}