/* nolan-room.css — hall two of the museum: the thirteen Nolan / 13 posters
   hung in the shared room (.flow--room, flow.css) as 2:3 plates in black
   lacquer with a brass fillet. The room derives everything else; this file
   says the finish, the proportion, and the poster strip type, which is the
   poster's own live title and year set into its paper strip. */

#hall-2 {
  --frame-finish-face: #1a1c17;
  --frame-finish-lit: #757970;
  --frame-finish-dark: #050607;
  --frame-finish-fillet: #b8925a;
  --flow-ratio: 1.5;
  --sans: "League Spartan", "Arial Narrow", sans-serif;
  --condensed: "Anton", "Arial Narrow", sans-serif;
  --serif: "Bodoni Moda", Didot, serif;
}

#hall-2 .poster-plate {
  position: relative;
  display: block;
  container-type: inline-size;
}

#hall-2 .poster-type {
  position: absolute;
  right: 5%;
  bottom: 3.2%;
  left: 5%;
  top: auto;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: min(12px, 4cqw);
  color: #1d211e;
}

#hall-2 .poster-type > p {
  display: flex;
  gap: .9em;
  margin: 0 0 .2em;
  font: 700 min(2.6cqw, .62rem)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#hall-2 .poster-type h2 {
  order: -1;
  margin: 0;
  font-size: min(9.6cqw, 2.6rem);
  font-weight: 400;
  line-height: .82;
  white-space: nowrap;
  text-transform: uppercase;
}

#hall-2 .poster-type h2 span { display: inline; }

/* each film's own face, colour and measure */
#hall-2 .film--tenet .poster-type { color: #102733; }
#hall-2 .film--tenet .poster-type h2 { color: #173ae3; font-family: var(--sans); font-weight: 850; letter-spacing: .08em; }
#hall-2 .film--inception .poster-type { color: #1a1b19; }
#hall-2 .film--inception .poster-type h2 { color: #1a1b19; font-family: var(--condensed); letter-spacing: -.015em; }
#hall-2 .film--inception .poster-type h2 span:last-child { color: #a62d67; }
#hall-2 .film--interstellar .poster-type { color: #171915; }
#hall-2 .film--interstellar .poster-type h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.04em; }
#hall-2 .film--interstellar .poster-type h2 span:last-child { color: #136c68; }
#hall-2 .film--following .poster-type h2 { color: #2a2d1c; font-family: var(--condensed); letter-spacing: -.015em; }
#hall-2 .film--memento .poster-type h2 { color: #b0286e; font-family: var(--sans); font-weight: 850; letter-spacing: .08em; }
#hall-2 .film--insomnia .poster-type h2 { color: #1d6b78; font-family: var(--serif); font-weight: 700; letter-spacing: -.04em; }
#hall-2 .film--batman-begins .poster-type h2 { color: #23313f; font-family: var(--condensed); letter-spacing: -.015em; }
#hall-2 .film--batman-begins .poster-type h2 span:last-child { color: #c8501d; }
#hall-2 .film--the-prestige .poster-type h2 { color: #5a3d8a; font-family: var(--serif); font-weight: 700; letter-spacing: -.04em; }
#hall-2 .film--the-dark-knight .poster-type h2 { color: #22303a; font-family: var(--sans); font-weight: 850; letter-spacing: .08em; }
#hall-2 .film--the-dark-knight-rises .poster-type h2 { color: #b3421c; font-family: var(--condensed); letter-spacing: -.015em; }
#hall-2 .film--dunkirk .poster-type h2 { color: #1f4f8a; font-family: var(--sans); font-weight: 850; letter-spacing: .08em; }
#hall-2 .film--oppenheimer .poster-type h2 { color: #b8330f; font-family: var(--condensed); letter-spacing: -.015em; }
#hall-2 .film--the-odyssey .poster-type h2 { color: #6e1f2b; font-family: var(--serif); font-weight: 700; letter-spacing: -.04em; }

/* long titles take the smaller tier so the year keeps its room */
#hall-2 .film--the-prestige .poster-type h2,
#hall-2 .film--the-dark-knight .poster-type h2,
#hall-2 .film--the-dark-knight-rises .poster-type h2,
#hall-2 .film--interstellar .poster-type h2,
#hall-2 .film--oppenheimer .poster-type h2,
#hall-2 .film--the-odyssey .poster-type h2 {
  font-size: min(7cqw, 2rem);
}

/* the placard carries the line, in the poster's serif */
#hall-2 .flow-item .flow-caption {
  max-width: min(calc(var(--flow-w) * 1.5), calc(100vw - 32px));
}

#hall-2 .flow-item .flow-caption i {
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.3;
}