/* ─────────────────────────────────────────────────────────────────────────────
   Deliberate departures from the design, for phones.

   home.css is the design's stylesheet byte for byte, and it stays that way —
   everything we change on purpose lives here instead, loaded after it, so the
   whole list of deviations is this file. Deleting the <link> in the layout
   restores the design exactly.
   ───────────────────────────────────────────────────────────────────────────── */

/* The story section reads twice on a phone.

   The manuscript photograph has the heading and all three paragraphs painted
   into it, and `.parchment` repeats them underneath as live text. The design
   already knows this: above 900px it hides `.parchment` visually and keeps it
   only for screen readers. Below 900px it shows it, presumably because the
   painted text is small — but the result is the passage twice, once in the
   picture and once beneath it.

   So the desktop treatment now applies at every width: the picture carries the
   words, and the text stays in the document for screen readers and search
   engines rather than being deleted. */
.parchment {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  padding: 0;
  margin: 0;
  border: 0;
  white-space: nowrap;
}

/* The closing shot is cropped to a sliver on a phone.

   `.exit video` is the landing film again, covered into a full-height box and
   then scaled a further 1.42 — a flourish that reads well on a wide screen and
   leaves about 18% of the frame's width on a 390px one, slicing the wordmark
   painted into it to "PSKAR" and "GE · CRAFT · ET".

   The design already has an answer for this shape of problem: in portrait it
   stops the hero film filling the height and lets the ground take over below
   it. The same treatment here, at the same 66svh, and without the zoom. */
@media (max-aspect-ratio: 4/5) {
  .exit video {
    height: 66svh;
    transform: none;
    object-position: 50% 50%;
  }
  /* The dusk wash spans the whole section, so it has to reach the film's new
     edge rather than sit over a box that is no longer there. */
  .exit .dusk {
    background: linear-gradient(
      to top,
      var(--emerald-deep) 0,
      var(--emerald-deep) 30%,
      rgba(10, 31, 25, 0.92) 38%,
      rgba(120, 60, 20, 0.3) 62%,
      rgba(255, 170, 90, 0.22) 78%,
      rgba(255, 200, 120, 0.12)
    );
    mix-blend-mode: normal;
  }
}

/* The opening film is cut off at the sides on a phone.

   It is a 16:9 film covered into a tall screen, so about a quarter of its
   width survives — and what the film ends on is a line of type. "Where
   heritage finds home" arrives as "e heritage finds", which is worse than
   not showing it.

   The frames are flat grounds with type and a single subject on them, no
   composition running to the edges, so there is nothing to lose by fitting
   the whole frame instead of filling the screen with part of it. The band
   above and below is the loader's own black. */
@media (max-aspect-ratio: 4/5) {
  /* The element is given the film's own shape rather than the screen's.
     `object-fit: contain` looked right in a desktop browser and was black on
     a phone: the element still covered the whole screen, and a mobile browser
     paints its own black behind the frame inside it, hiding whatever ground
     sits below. Sized to 16:9 there is no inside-the-element letterbox left
     to paint, and the gradient shows. */
  #loader video {
    top: 50%;
    bottom: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    object-fit: cover;
    background: transparent;
  }

  /* The band above and below the film is painted with the film's own edge
     colours, sampled frame by frame in home.js and handed over as
     --film-top / --film-bottom. The stops sit where the film's edges are on
     a tall screen, so each colour meets the frame it was taken from and the
     letterbox stops looking like one. Black until the first frame is
     readable, which is what the loader was anyway. */
  #loader {
    background:
      linear-gradient(
        to bottom,
        var(--film-top, #000) 0%,
        var(--film-top, #000) 34%,
        var(--film-bottom, #000) 66%,
        var(--film-bottom, #000) 100%
      ),
      #000;
  }
}