/* Artwork plates for Media Mindfulness.
   Lives in its own file because the exercise pages do not load site.css: they
   carry their own chrome, and pulling the whole site stylesheet in to get one
   figure style would restyle pages that were fine. Linked only where a plate
   actually appears. Nothing here sets display on a [lang] element, so the
   site's language toggle keeps working underneath it. */
/* ---- Artwork plates ------------------------------------------------------
   The paintings are plates in a book, not backgrounds behind text. Each one
   sits in its own frame, with the work named underneath and one line saying
   what it is doing on that page. Nothing is tinted, nothing is cropped for
   mood, and no type is set over a canvas: these are other people's paintings
   and the caption has to be able to tell the truth about what you are seeing.

   The blurred twenty-pixel version of each painting is inlined as the img's
   background, so the frame holds its shape and shows the picture's own colour
   while the real file is still on the way. width and height are on every img
   for the same reason: a plate that arrives without them shoves the paragraph
   you were reading down the page. */
.plate { margin: 34px 0 38px; }
.plate picture { display: block; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(26, 20, 16, .14), 0 10px 30px rgba(26, 20, 16, .10);
}
.plate figcaption { margin-top: 14px; }
.plate .work {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2, #584a3c);
  margin: 0;
}
.plate .work cite { font-style: italic; }
.plate .why {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink, #1a1410);
  margin: 6px 0 0;
  max-width: 54ch;
}
.plate .src {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink3, #9a8a78);
  margin: 8px 0 0;
}
.plate .src a { color: inherit; }
.plate .src a:hover { color: var(--red, #8b2020); }

/* The hero is the one plate allowed out of the text column, because the
   painting IS the argument on that page rather than an illustration of it. */
.plate-hero { margin: 6px 0 40px; }
@media (min-width: 860px) {
  .plate-hero {
    width: min(980px, calc(100vw - 64px));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

/* The predella: the five moves as five panels in a row, the way a row of small
   scenes runs along the base of an altarpiece. Panels are sized by each
   painting's own proportions (flex-grow carries the ratio, inline), so they
   share a height, differ in width, and none of them is cropped. */
.predella {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 12px;
}
.predella .panel { margin: 0; min-width: 0; }
.predella .panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(26, 20, 16, .14), 0 6px 18px rgba(26, 20, 16, .09);
}
.predella .panel figcaption {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink2, #584a3c);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}
.predella-note {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink3, #9a8a78);
  margin: 0 0 8px;
}
.predella-note a { color: var(--ink2, #584a3c); }
/* On a phone, five panels across are thumbnails of nothing. The strip becomes
   something you pan, one panel at a time, which is how a predella is read
   anyway. Fixed height here, so the differing widths still line up. */
@media (max-width: 720px) {
  .predella {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -20px;
    padding: 0 20px 4px;
  }
  .predella .panel { flex: 0 0 auto !important; scroll-snap-align: center; }
  .predella .panel img { width: auto; height: 190px; }
  .predella .panel figcaption { font-size: 11px; }
}

/* ---- The credits page ---------------------------------------------------
   One row per painting: the thumbnail links to the page the plate hangs on,
   so the list doubles as a map of where the art is used. */
.artnote {
  background: var(--cream, #f5f0e6);
  border-left: 3px solid var(--gold, #a08030);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin: 0 0 34px;
}
.artnote p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.artnote a { color: var(--red, #8b2020); }
.artrow {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 22px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule, #e0d8cc);
  margin: 0;
}
.artrow:last-of-type { border-bottom: 0; }
.artthumb { display: block; }
/* No crop here either. On a page whose whole job is to say what each picture
   IS, showing two thirds of it would be a strange way to begin. */
.artthumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(26, 20, 16, .14), 0 6px 18px rgba(26, 20, 16, .09);
}
.artrow figcaption > p { margin: 0 0 4px; }
.artrow .work { font-size: 17px; line-height: 1.4; }
.artrow .work cite { font-style: italic; }
.artrow .place { font-size: 15px; color: var(--ink2, #584a3c); }
.artrow .why {
  font-size: 16px; font-style: italic; color: var(--ink, #1a1410);
  margin-top: 8px; max-width: 54ch;
}
.artrow .meta {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink3, #9a8a78);
  line-height: 1.9;
  margin-top: 10px;
}
.artrow .meta a { color: var(--ink2, #584a3c); }
.artrow .meta a:hover { color: var(--red, #8b2020); }
.wrap-nav { padding-top: 0; }
@media (max-width: 640px) {
  .artrow { grid-template-columns: 108px 1fr; gap: 16px; }
  .artrow .work { font-size: 16px; }
}

/* The homepage hero is a dark panel, and the caption colours above are set for
   parchment. Unchanged, the credit line under the Caravaggio was near-black on
   near-black: legally present, practically invisible, which is the one thing a
   credit line must never be. */
.hero .plate .work { color: rgba(250, 250, 247, .78); }
.hero .plate .why { color: rgba(250, 250, 247, .92); }
.hero .plate .src { color: rgba(250, 250, 247, .55); }
.hero .plate .src a { color: rgba(250, 250, 247, .72); }
.hero .plate .src a:hover { color: #d9b45a; }
.hero .plate img { box-shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 20px 60px rgba(0, 0, 0, .40); }

/* ---- The film -----------------------------------------------------------
   preload="none" is the whole performance story: five megabytes stay on the
   server until somebody presses play, and the poster carries the meaning in
   the meantime. The transcript is a <details> rather than a caption track
   because the words are burned into the picture, and a VTT of text already
   on screen helps nobody. */
.film { margin: 34px 0 40px; }
.film h2 { margin-bottom: 6px; }
.film-sub {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16.5px; font-style: italic;
  color: var(--ink2, #584a3c); margin: 0 0 16px;
}
.film video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; background: #12100e;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(26, 20, 16, .14), 0 10px 30px rgba(26, 20, 16, .12);
}
.film-t { margin-top: 14px; }
.film-t summary {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink2, #584a3c); cursor: pointer;
  min-height: 44px; display: flex; align-items: center;
}
.film-t summary:hover { color: var(--red, #8b2020); }
.t-list { list-style: none; margin: 6px 0 0; padding: 0; }
.t-list li { padding: 12px 0; border-bottom: 1px solid var(--rule, #e0d8cc); }
.t-list li:last-child { border-bottom: 0; }
.t-move {
  display: block; font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red, #8b2020);
}
.t-line { display: block; font-size: 17px; margin-top: 3px; }
.t-work {
  display: block; font-family: 'Cinzel', serif; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3, #9a8a78); margin-top: 5px;
}