/* 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); }
/* The hero centres its text, and .why carries a 54ch measure with no side
   margins: centred lines inside a box still pinned to the left edge of a plate
   half again as wide. The measure has to be centred too, and balanced, or the
   sentence hangs off one side of the painting. */
.hero .plate .why {
  color: rgba(250, 250, 247, .92);
  max-width: 48ch;
  margin: 10px auto 0;
  text-wrap: balance;
}
.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); }

/* On a screen too short to hold the whole hero (see the note in site.css: every
   laptop), the painting is the part that gives. Everything else in that hero is
   a fixed cost: a wordmark is the size it is, a caption is as long as the truth
   about the picture takes, and two buttons nobody can see are worth nothing. So
   the plate takes the height that is left over and works out its own width from
   the canvas's proportions, which is why width goes to auto here: with both
   dimensions auto the browser scales the picture by its real 2200x956 and the
   painting is never squashed to fit.

   It stops at 220px, and below that the page simply scrolls. A reproduction
   smaller than that is not a painting you can read, and the point of putting
   the Caravaggio at the top of the page was that you could read it.

   The caption lines close up by a few pixels each, for the same reason. */
@media (min-width: 860px) and (max-height: 1200px) {
  .hero .plate-hero { margin-bottom: 24px; }
  .hero .plate-hero img {
    width: auto;
    max-width: 100%;
    max-height: max(220px, calc(100svh - 580px));
    margin-inline: auto;
  }
  .hero .plate-hero figcaption { margin-top: 10px; }
  .hero .plate-hero .why { margin-top: 8px; }
  .hero .plate-hero .src { margin-top: 6px; }
}

/* ---- 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;
}

/* The desktop rescue above is gated at min-width 860px, because that is where
   the plate leaves the text column. Height is not a desktop-only problem, and
   gating the cure on width meant no phone got any. Measured with real
   viewports: 375x667 ran the hero 213px past the screen, 320x568 288px past,
   and a phone held sideways at 844x390 ran it 533px past.

   These have to live in art.css rather than beside the rest of the phone rules
   in site.css: this file loads last and already owns `.hero .plate-hero img`,
   so the same selector written in site.css loses at equal specificity, and did.
   At 932x430 the painting kept the desktop 220px floor and the fix looked like
   it had simply failed. */
@media (max-width: 860px) {
  .hero .plate-hero img {
    width: auto;
    max-width: 100%;
    max-height: max(120px, calc(100svh - 500px));
    margin-inline: auto;
  }
}

/* Sideways, the painting gets a share of the screen rather than a subtraction:
   below 560px of height there is not enough left over for `100svh minus the
   chrome` to mean anything, and the honest answer is a smaller plate and a
   page that scrolls. */
@media (max-height: 560px) {
  .hero .plate-hero img {
    width: auto;
    max-width: 100%;
    max-height: 46svh;
    margin-inline: auto;
  }
}