/* ---------------------------------------------------------------- scenes -- */

/* The illustrated figures — the tavern glimpse in the hero, the choice and
   living-world scenes in the deck, the cognition scene beside Servitor. They
   share one treatment: a cropped plate with its caption laid over the foot of
   the image, so the words belong to the picture rather than sitting under it
   as a separate block.
   Reconstructed against .dream-loop/r26-final/home-mobile-1.png. */

.maeve-scene {
    position: relative;
    margin: 1.6rem 0 0;
    /* The large step of the radius scale. At 1100px wide the small step's
       28px corners read as square — "a sharp rectangle with a black caption
       bar, a Steam screenshot frame" — and the most beautiful thing on the
       site was in the most rigid container on it. */
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        inset 1px 1px 0 rgba(255, 243, 194, 0.22),
        14px 20px 44px -18px var(--plate-shade),
        4px 6px 14px -8px var(--plate-shade);
}

.nightfall .maeve-scene,
.chapter-night .maeve-scene,
.turn-band .maeve-scene {
    --plate-shade: rgba(5, 9, 6, 0.78);
}

.maeve-scene img {
    display: block;
    width: 100%;
    height: auto;
}

/* Laid over the plate, not beneath it. The band is dark enough to carry cream
   ink at weight over whatever part of the illustration it lands on.

   The scrim used to be a single gradient running transparent-to-dark across the
   caption's own box, which put a one-line caption's text in the fading half of
   it — legible over a dark plate, not over a bright one. So the floor and the
   fade are now separate layers: the band itself is opaque, and ::before carries
   the softening above it. Cream on #131c15 measures 14.9:1, and it measures the
   same over every plate instead of depending on the frame underneath.

   Opaque, though, it was a bar: a flat black band across the foot of a
   painting, and both reviewers named it. At 84% the plate is still under the
   words — the counter, the lamplight — dimmed enough that cream measures
   above 9:1 even over the brightest plate on the site, and the band reads as
   dusk falling across the bottom of the picture rather than a label stuck
   on it. The fade above it is taller for the same reason. */
.maeve-scene figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.85rem 1rem 0.95rem;
    background-color: rgba(19, 28, 21, 0.84);
    color: var(--night-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

/* The fade, lifted out of the caption box so it never crosses the text. It sits
   in the plate above the band and is clipped by .maeve-scene's overflow. */
.maeve-scene figcaption::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    /* Proportional, not a fixed 80px: that was 17% of the desk plate and 31%
       of the phone one, so the scrim that barely touches the picture on a
       desktop swallowed a third of it on a phone. */
    height: min(5rem, 18%);
    background: linear-gradient(rgba(19, 28, 21, 0), rgba(19, 28, 21, 0.84));
    pointer-events: none;
}

/* The two chapters that carried the argument and no picture. Code occupied
   more of this page than imagery did — 6.1% against 4.2% — which is the exact
   inverse of how a game site is built, so these run wide rather than inset. */
.room-scene,
.turn-scene {
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
    max-width: none;
}

.room-scene img,
.turn-scene img {
    aspect-ratio: 21 / 9;
    /* A plate takes its height from the width alone, and #turn is the target
       of four links that land a reader on its first ink — which is the
       figure. At 1440x700 that made the arrival view 474px of a 626px
       window: 100% illustration, with the chapter's own title entirely off
       screen. The ratio still sets the crop; the viewport sets the ceiling. */
    max-height: 52vh;
    object-fit: cover;
    object-position: center 42%;
}

/* The turn's plate is the same painting the Servitor chapter opens with, and
   a reader on a 900px screen met it whole twice inside three screens. The
   turn is about one object in that painting — the sealed letter in her hand
   — so the turn shows the detail: the frame closes in on the letter, the
   hands and the lamp, the way a second shot in a film cuts closer to what
   the first shot established. The figure's overflow does the cropping. */
.turn-scene img {
    /* 1.3, not 1.8. The tighter cut framed the letter and the hands and
       took her head off — "the crop begins at her neck, her face is absent
       at the moment the page names the moment an NPC becomes someone". This
       one keeps her face and the letter and loses the room around them. */
    transform: scale(1.3);
    transform-origin: 63% 58%;
}

/* A 21:9 band at 390px is 167px tall, and the group scene's figures were cut
   at the chest. On a phone that plate stands taller.

   The turn's plate is excluded. It carries a 1.3x zoom solved against the
   21:9 band, and `cover` at 4:3 crops the WIDTH of a 16:9 source instead of
   its height — the two compounded and walked the sealed letter, the one
   object the chapter is about, into the corner and under the caption. */
@media (max-width: 620px) {
    .room-scene img {
        aspect-ratio: 4 / 3;
    }

    /* The turn's plate goes to the source's own ratio, so `cover` crops
       almost nothing, and the zoom eases off. At 21:9 on a 390px screen it
       was a 167px letterbox and the 1.3x push put Maeve's face against the
       right edge with neither the drawer nor the letter in frame — under a
       caption that names both. */
    .turn-scene img {
        aspect-ratio: 16 / 9;
        transform: scale(1.12);
        transform-origin: 58% 54%;
    }
}