/* The introduction film and "What the book is about". The film is first seen the way every
   painting on this site is: through the two-inch gap in the filing-room door, which opens once
   as the frame comes into view. It plays only when the reader presses the seal. */

.about-title { max-width: 24ch; margin: .8rem 0 clamp(1.5rem, 4vh, 2.5rem); }

/* ---------------------------------------------------------------- the frame */
.film { margin: 0 0 clamp(2rem, 6vh, 3.5rem); }
.film-frame {
  --st: clamp(.7rem, 1.3vw, 1.15rem);
  --sb: calc(var(--st) * .375);
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; background: #0e0c08;
  clip-path: polygon(calc(50% - var(--st)) 6%, calc(50% + var(--st)) 6%, calc(50% + var(--sb)) 94%, calc(50% - var(--sb)) 94%);
  transition: clip-path 1.9s var(--ease-seal);
}
.film.is-open .film-frame, html.no-js .film-frame { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0e0c08; }
.film-video::cue { font-family: var(--f-body); background: rgba(14, 12, 8, .72); color: #f4ecd8; }
.film-glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 2;
  background: linear-gradient(90deg, transparent calc(50% - 3.5rem), rgba(248, 208, 80, .6) 50%, transparent calc(50% + 3.5rem));
  transition: opacity 1.2s var(--ease-ink);
}
.film.is-open .film-glow, html.no-js .film-glow { opacity: 0; }

/* ---------------------------------------------------------------- the seal
   In the middle of the frame, where a reader looks for a way to play a film: the whole frame is
   the button, and the seal says so wherever the frame is cut by the edge of the screen. */
.film-play {
  --seal: clamp(3.3rem, 7.5vw, 5rem);
  position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; border: 0; cursor: pointer;
  display: grid; justify-items: center; align-content: center; row-gap: .3rem; text-align: center;
  padding: clamp(.9rem, 3vw, 2rem);
  font: inherit; color: #f4ecd8;
  background: radial-gradient(ellipse 42% 48% at 50% 52%, rgba(14, 12, 8, .66), rgba(14, 12, 8, .3) 62%, rgba(14, 12, 8, 0));
}
.film-play[hidden], .film.is-playing .film-play { display: none; }
/* While the film is fetched (a host without byte ranges), the seal waits and shows how far. */
.film-play[disabled] { cursor: progress; }
.film-play[disabled] .film-seal { animation: seal-wait 1.6s ease-in-out infinite; }
@keyframes seal-wait { 50% { opacity: .55; } }
.film-seal {
  width: var(--seal); aspect-ratio: 1; position: relative; margin-bottom: clamp(.4rem, 1.4vw, .9rem);
  background: var(--red); transform: rotate(-3deg);
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px rgba(251, 243, 230, .55), 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .5s var(--ease-seal), background-color .3s;
}
.film-seal::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%);
  border-left: calc(.34 * var(--seal)) solid #fbf3e6;
  border-top: calc(.2 * var(--seal)) solid transparent;
  border-bottom: calc(.2 * var(--seal)) solid transparent;
}
.film-play:hover .film-seal, .film-play:focus-visible .film-seal { background: var(--red-4); transform: rotate(0deg) scale(1.06); }
.film-play:active .film-seal { transform: rotate(0deg) scale(.97); transition-duration: .12s; }
.film-play:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; }
.film-play-text { font-size: var(--step-2); line-height: 1.15; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.film-play .label { color: #e2d8c2; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
@media (max-width: 34rem) {
  /* A phone's frame is small and its poster pale: a deeper shade behind the words, and the
     length and "sound, captions" kept at a size that can be read (it was under ten pixels). */
  .film-play {
    padding: .75rem; row-gap: .2rem;
    background: radial-gradient(ellipse 58% 60% at 50% 56%, rgba(14, 12, 8, .74), rgba(14, 12, 8, .36) 64%, rgba(14, 12, 8, 0));
  }
  .film-play-text { font-size: 1.15rem; }
  .film-play .label { font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
}

/* ---------------------------------------------------------------- caption */
.film-caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .9rem;
  color: var(--fg-2); font-style: italic; font-size: .98rem; line-height: 1.45;
}
.film-caption .label { font-style: normal; color: var(--accent); }

/* ---------------------------------------------------------------- the narration, picture by picture
   Closed, one plain button under the caption. Open without JavaScript, every line under the still
   it is spoken over. With it, a slideshow of one line at a time (.is-slides), or the whole list. */
.film-reader { margin-top: 1.1rem; }
.film-reader-toggle {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem .75rem;
  min-height: 2.75rem; padding: .55rem 1.1rem .55rem .85rem; list-style: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); border-radius: 2px; color: var(--fg);
  transition: background-color .25s, border-color .25s;
}
.film-reader-toggle::-webkit-details-marker { display: none; }
.film-reader-toggle:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.film-reader-toggle:active { transform: translateY(1px); }
.film-reader-toggle .label { color: var(--muted); }
.film-reader[open] .film-reader-toggle { border-color: var(--fg); }
/* Open or closed at a glance: a small chevron after the count, turned up while it is open. */
.film-reader-toggle::after {
  content: ""; flex: none; width: .42rem; height: .42rem; margin: 0 .1rem 0 .05rem;
  border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2);
  transform: translateY(-.12rem) rotate(45deg); transition: transform .35s var(--ease-ink);
}
.film-reader[open] .film-reader-toggle::after { transform: translateY(.1rem) rotate(-135deg); }
/* A small contact sheet: four frames. */
.film-reader-icon {
  width: 1.1rem; height: .82rem; flex: none; color: var(--accent);
  background:
    linear-gradient(currentColor 0 0) 0 0 / 44% 40% no-repeat, linear-gradient(currentColor 0 0) 100% 0 / 44% 40% no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 44% 40% no-repeat, linear-gradient(currentColor 0 0) 100% 100% / 44% 40% no-repeat;
}

.film-reader-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.2rem; }
.film-reader-bar[hidden] { display: none; }
.film-reader-step { min-width: 2.75rem; justify-content: center; font-size: 1.15rem; }
/* Wide enough for "13 / 13" (letter-spaced), so the next arrow does not move as the count grows. */
.film-reader-count { min-width: 8.6ch; text-align: center; color: var(--fg-2); }
.film-reader-all { margin-left: auto; }
.film-reader:not(.is-slides) :is(.film-reader-step, .film-reader-count, .film-reader-play) { display: none; }

.film-board {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 1.6rem clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.film-line { margin: 0; }
/* Until a still arrives its place is a quiet tone of the page (it was a dark box on light pages). */
.film-line-still {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: color-mix(in srgb, var(--fg) 7%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent), 0 14px 30px -20px rgba(0, 0, 0, .7);
}
.film-line-text { margin: .65rem 0 0; line-height: 1.5; color: var(--fg-2); }
.film-line-time { display: block; margin-bottom: .2rem; color: var(--accent); }
/* Small type, but a full-size target: 44 px tall, the words where they were. */
.film-line-play {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: 0 .1rem; border: 0; background: none; cursor: pointer;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .25em;
}
/* The triangle is drawn, not read out ("black right-pointing small triangle"). */
.film-line-play::before { content: "\25B8\00a0"; content: "\25B8\00a0" / ""; }
.film-line-play:hover, .film-line-play:focus-visible { color: var(--accent); text-decoration-color: currentColor; }

/* One line at a time: the picture large, the words beside it at reading size. Every line sits in
   the same cell and only the current one is visible, so the slideshow is as tall as its longest
   line and stepping through it never moves the page below. The other lines' stills are not
   rendered (a box of the same shape stands in for each), so a still still loads only when shown. */
.film-reader.is-slides .film-board { grid-template-columns: minmax(0, 1fr); gap: 0; touch-action: pan-y; }
.film-reader.is-slides .film-line {
  grid-area: 1 / 1; visibility: hidden;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center; align-content: start;
}
.film-reader.is-slides .film-line.is-current { visibility: visible; }
.film-reader.is-slides .film-line:not(.is-current) .film-line-still { display: none; }
.film-reader.is-slides .film-line:not(.is-current)::before { content: ""; display: block; width: 100%; aspect-ratio: 16 / 9; }
.film-reader.is-slides .film-line-text { margin: 0; font-size: var(--step-1); line-height: 1.42; color: var(--fg); }
.film-reader.is-slides .film-line-play { display: none; }
.film-reader.is-slides .film-line.is-current .film-line-still { animation: film-line-in .6s var(--ease-ink); }
@keyframes film-line-in { from { opacity: .15; } to { opacity: 1; } }
@media (max-width: 44rem) {
  .film-reader.is-slides .film-line { grid-template-columns: minmax(0, 1fr); }
  .film-reader-all { margin-left: 0; }
}

/* ---------------------------------------------------------------- the premise */
.about-steps {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.about-step { border-top: 1px solid var(--rule); padding-top: 1rem; }
/* One picture per step: the legend as the classic pictures it (a woodblock print, whole), the
   commission and the investigation in the novel's own paintings. */
.about-step-image {
  margin: 0 0 1rem; aspect-ratio: 16 / 9; overflow: hidden; background: #17140e;
  box-shadow: 0 0 0 1px rgba(236, 229, 211, .08), 0 16px 34px -20px rgba(0, 0, 0, .8);
}
.about-step-image picture, .about-step-image img { display: block; width: 100%; height: 100%; }
.about-step-image img { object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--ease-ink); }
.about-step-image--portrait img { object-position: 50% 24%; }
.about-step:hover .about-step-image img { transform: scale(1.03); }
.about-step .label { color: var(--accent); margin: 0 0 .6rem; }
.about-step p:not(.label) { margin: 0; line-height: 1.6; color: var(--fg-2); }
.about-links { margin-top: clamp(1.8rem, 5vh, 3rem); }

/* ---------------------------------------------------------------- still and printed */
html.reduce-motion .film-frame, html.reduce-motion .film-glow { transition: none; }
html.reduce-motion .film-frame { clip-path: none; }
html.reduce-motion .film-glow { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .film-frame, .film-glow { transition: none; }
  .film-frame { clip-path: none; }
  .film-glow { opacity: 0; }
}
@media print {
  .film-frame { clip-path: none; }
  .film-play, .film-glow, .film-reader-bar, .film-line-play { display: none; }
}