/* NEGUSTOLONOW — css/mercy-room.css — World 002, mercy-room.html and printing-guide.html.

   Everything shared is in negusto.css: the shell, the rooms, the folds, the card,
   the pocket, the caption. This file holds only what is this world's own —
   the plate at the top of the room, the grid the pieces stand on, the bench, the
   shelf, and the gentian labels — and it is scoped under body[data-world="002"]
   so nothing here can reach Ossel.

   ONE COLOUR OF ITS OWN: GENTIAN, the antiseptic dye you paint on somebody else's
   skin. It is this world's iodine, and it is rationed the same way: it appears on
   the hidden labels, sewn inside at the neck, the cuff and the waistband, and
   nowhere a stranger can see it. Aubergine is not a colour of the house at all:
   it is what is printed on the cloth in the plates, and it is named here so the
   labels can quote it. */

body[data-world="002"] {
  --gentian: #3E2A66;      /* inside only */
  --aubergine: #41212F;    /* printed on the cloth, never on the page */
}

/* --- 01. the room: one plate, the name, one sentence -------------------- */
.mr-plate { position: relative; margin: 0; }
.mr-plate__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 72% center; background: var(--paper-2); }
.mr-plate__cap { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; justify-content: space-between; align-items: baseline; padding-top: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
.mr-plate__cap .caption__text { max-width: 42ch; }
.mr-name { margin-top: var(--s-7); }
.mr-open .surface__line { margin-top: var(--s-5); }
@media (min-width: 46rem) { .mr-plate__img { aspect-ratio: 3 / 2; object-position: center; } }
/* Her and him, drawn as mirrors, printed as one sheet.
   The two plates overlap until their rings interlock, chairs back to back in the
   shared middle, the rose train and the pomegranate train running out to either
   edge. Multiply lets the page's paper through the white and lets the overlap
   overprint like two passes of ink. Their edges are masked soft so no seam shows.
   On arrival they draw together (the pull); scrolling on, they part (the push).
   `translate` carries the pull and `transform` the push, so the two never fight. */
.mr-pair { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.mr-pair__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1344 / 768;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Phone: stacked, overlapping by a third so the rings still lock, one above the other. */
.mr-pair__img + .mr-pair__img { margin-top: -19%; }

@media (min-width: 46rem) {
  .mr-pair { flex-direction: row; }
  /* Each plate is 1/1.55 of the row; the second tucks back under the first by 45% of
     a plate, which is where the two rings cross. */
  .mr-pair__img {
    flex: none; width: calc(100% / 1.55);
  }
  .mr-pair__img + .mr-pair__img { margin-top: 0; margin-left: calc(-45% / 1.55); }
}

@media (prefers-reduced-motion: no-preference) {
  .mr-pair__img:first-child { animation: mr-pull-her 2.8s cubic-bezier(.2,.7,.2,1) both; }
  .mr-pair__img:last-child  { animation: mr-pull-him 2.8s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes mr-pull-her { from { translate: -6% 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes mr-pull-him { from { translate: 6% 0;  opacity: 0; } to { translate: 0 0; opacity: 1; } }

  @supports (animation-timeline: scroll()) {
    .mr-pair__img:first-child { animation: mr-pull-her 2.8s cubic-bezier(.2,.7,.2,1) both, mr-push-her linear both; }
    .mr-pair__img:last-child  { animation: mr-pull-him 2.8s cubic-bezier(.2,.7,.2,1) both, mr-push-him linear both; }
    .mr-pair__img { animation-timeline: auto, scroll(root); animation-range: normal, 0 70vh; }
    @keyframes mr-push-her { to { transform: translateX(-5%); } }
    @keyframes mr-push-him { to { transform: translateX(5%); } }
  }
}

/* --- 02. the pieces: the plates grid ------------------------------------
   A garment stands on a stage, and under it the line is set at the size the
   garment prints it. The stage is the only frame on the page. */
.mr-pieces { display: grid; gap: var(--s-8) var(--gutter); }
@media (min-width: 46rem) { .mr-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.mr-piece { margin: 0; }
.mr-piece__btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mr-stage { display: block; position: relative; aspect-ratio: 6 / 7; overflow: hidden; background: var(--paper-2); border: var(--rule-hair) solid var(--hair); }
.mr-stage img { width: 100%; height: 100%; object-fit: cover; }
.mr-piece__btn:hover .mr-stage, .mr-piece__btn:focus-visible .mr-stage { border-color: var(--ink); }
.mr-piece__no { display: block; margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.mr-piece__say { display: block; margin-top: 0.45rem; max-width: 22ch; font-family: var(--f-serif); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 5.2vw, 2.3rem); line-height: 1.02; }
/* What has been done to the piece and what has not, in the Counter's words (§9).
   It sits under the line and above the way in, so the last word on a stage is
   never a state: a stage ends by offering the thing, not by ruling on it. */
.mr-piece__state { display: block; margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mole); }
.mr-piece__take { display: block; margin-top: var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.mr-piece__btn:hover .mr-piece__take, .mr-piece__btn:focus-visible .mr-piece__take { color: var(--accent); }
.mr-piece__btn.is-kept .mr-piece__take::after { content: " ·"; color: var(--gentian); }

/* the fourth, not cut: an empty stage that keeps its label, as the archive keeps a withheld plate */
.mr-stage--pending { display: grid; place-content: center; gap: 0.4rem; text-align: center; }
.mr-pending__rule { display: block; width: 84px; height: 1px; margin: 0 auto 0.6rem; background: var(--slack); }
.mr-pending__stamp { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mole); }
.mr-pending__sub { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slack); }

/* --- 03. the bench: written, placed, not cut ---------------------------- */
.mr-bench { border-top: var(--rule) solid var(--line); }
.mr-bench > li { display: grid; gap: 0.3rem; padding-block: var(--s-4); border-bottom: var(--rule-hair) solid var(--hair); }
.mr-bench b { font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.2; }
.mr-bench span { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: lowercase; color: var(--mole); vertical-align: 0.15em; padding-inline: 0.15em; }
.mr-bench i { font-style: normal; font-family: var(--f-mono); font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
@media (min-width: 70rem) { .mr-bench > li { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: 0 var(--s-6); align-items: baseline; } }
.mr-bench > li > .mr-cite { grid-column: 1 / -1; margin-top: 0.15rem; }

/* --- 04. the shelf: three objects with nothing written on them ---------- */
.mr-shelf { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 46rem) { .mr-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 62rem; } }
.mr-shelf img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-2); border: var(--rule-hair) solid var(--hair); }
.mr-shelf__no { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.mr-shelf__name { margin-top: 0.2rem; font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: 0.02em; }
.mr-shelf__spec { margin-top: 0.4rem; font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.7; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.mr-shelf__note { margin-top: 0.5rem; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.mr-shelf__get { margin-top: 0.5rem; font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.12em; text-transform: uppercase; }
.mr-files { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-6); font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.12em; text-transform: uppercase; }

/* --- the state line, and the seams back into Ossel ----------------------
   A state line says what was done and what was not, in the past tense, and
   never carries a price. A seam line is this room quoting the other world: a
   ruled mono link, set small, standing where the seam actually is — the line
   said at Hanna's door, the answer entered at Km 286, the stone on its cord. */
.mr-state { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mole); }
.mr-cite { margin-top: var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.6; letter-spacing: 0.06em; color: var(--ink-faint); max-width: 44ch; }
.mr-cite a { color: inherit; text-decoration: none; border-bottom: var(--rule-hair) solid var(--hair); }
.mr-cite a:hover, .mr-cite a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* --- the card, this world's part of it ---------------------------------
   The card itself is shared furniture (negusto.css §13c). Two things on it are
   this room's: the line the garment prints, and the labels nobody else sees. */
.mr-say { margin: 0.9rem 0 1.4rem; text-transform: uppercase; font-size: clamp(1.15rem, 3.4vw, 1.45rem); line-height: 1.12; max-width: 24ch; }
.mr-sign { margin-top: 1.2em; }
.mr-labels { margin-top: var(--s-4); border-top: var(--rule-hair) solid var(--gentian); padding-top: var(--s-3); }
.mr-labels__h { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gentian); }
.mr-labels p + p { margin-top: var(--s-3); }
.mr-labels b { display: block; font-weight: 400; text-transform: uppercase; font-size: var(--t-small); letter-spacing: 0.1em; color: var(--gentian); }
.mr-labels span { display: block; margin-top: 0.15rem; font-size: 0.95rem; color: var(--ink-soft); }

/* --- printing-guide.html ------------------------------------------------
   The shelf, taken further: the same three objects, with what a slicer needs.
   It is the same room, so it borrows the grid above and adds only the steps. */
.mr-steps { display: grid; gap: var(--s-5) var(--gutter); border-top: var(--rule) solid var(--line); }
@media (min-width: 52rem) { .mr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mr-steps > li { padding-top: var(--s-4); border-bottom: var(--rule-hair) solid var(--hair); padding-bottom: var(--s-4); }
.mr-steps b { display: block; font-family: var(--f-mono); font-weight: 400; font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mr-steps h3 { margin-top: var(--s-2); font-family: var(--f-display); font-weight: 700; font-size: var(--t-title); line-height: 1; text-transform: uppercase; }
.mr-steps p { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }