/* ============================================================
   IDENTITY · THE QUOTE WALL
   ------------------------------------------------------------
   Companion sheet to js/ident-lockup.js, which builds the lines
   and drives them. Build-owned rather than system.css: this is
   one beat's atmosphere, not a token any other page could want.

   WHAT IT IS. Once the lockup has been read and taken away, the
   sheet behind the diptych fills with running lines of what has
   been said about him — full bleed, far bigger than anything
   else on the page, and deliberately unreadable as a block. It
   is a field of words the photographs stand in front of, not a
   pull-quote; the readable one is still .k-ident__voice, which
   leaves before this arrives.

   SO IT IS BEHIND, AND IT IS QUIET. It sits under the frame and
   over the plates, at a tone a shade darker than the scroll
   field's hairlines. Anything louder and the diptych is standing
   on a poster.

   NO WRAP, AND THAT IS THE POINT. Each line is one line, run off
   both edges of the frame. A wall of type that wraps is a
   paragraph; a wall that runs out of the frame is a wall.
   ============================================================ */

.k-ident__wall {
  position: absolute;
  /* PAST THE PADDING, NOT INSIDE IT. `inset: 0` on a child of a
     padded box lands on the PADDING box, so the wall sat inside
     .k-ident's own top and bottom pad and read as a block with
     a wide margin rather than as a field. These pull it back out
     to the border box, which is the viewport. */
  top: calc(var(--kdb-ident-pad-top, 0px) * -1);
  bottom: calc(var(--kdb-ident-pad-bot, 0px) * -1);
  left: calc(var(--kdb-page-margin, 0px) * -1);
  right: calc(var(--kdb-page-margin, 0px) * -1);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The lines are driven as one block — see the ride in
     ident-lockup.js — so the transform lives on the host. */
  will-change: transform;
  contain: paint;
}

/* The frame carries the readable page and has to stay over the
   wall. It is not positioned in system.css, and an absolutely
   positioned sibling before it would otherwise win. */
.k-ident__frame { position: relative; z-index: 2; }

/* ---- ONE RUNNING PARAGRAPH -------------------------------- */
.k-ident__wall-flow {
  margin: 0;
  padding-inline: var(--kdb-page-margin, 2rem);
  font-family: "Permanent Marker", var(--kdb-font-display, Archivo), cursive;
  /* Sized to fill the frame. The second term is the block's own
     height budget divided by the rows it is allowed — a ceiling
     in rem either left a gap or overflowed depending on how
     long the quotes happened to be. */
  font-size: min(4.4vw, calc(100svh / (var(--wall-rows, 9) * 1.16)));
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.005em;
  /* IT WRAPS. That is the whole change — a wall that runs off
     both edges is a wall of lines; a wall that wraps is a
     sentence, and this is one sentence with ten voices in it. */
  white-space: normal;
  /* FULL MEASURE, BROKEN ANYWHERE. `pretty` balances the rag,
     which is the right instinct for a paragraph and the wrong
     one for a wall — it was pulling words down early and leaving
     the right edge ragged, so the block read as prose set in a
     column rather than as a surface of type.

     break-all lets a line run to the last character that fits
     and break there, mid-word if that is where the width ends.
     Both edges are then flush and the sentence reads as one
     continuous field, which is what it is. */
  word-break: break-all;
  overflow-wrap: anywhere;
  color: var(--kdb-neutral-20, #d9dde3);
}

/* The knot is kept for the DOM adjacency it gives the name, but
   it no longer refuses to wrap. Holding a word and a name
   together as one unbreakable run is what a RAGGED setting needs
   to stop a name falling to the head of a line; with the measure
   broken at the character that fits, refusing to break inside
   the knot would be the one thing pushing short lines back into
   a wall that is meant to be flush. The rag it was solving no
   longer exists. */
.k-ident__wall-knot { white-space: inherit; }

.k-ident__wall-chunk {
  /* Uncovered left to right on its own clock. `inline` so the
     paragraph wraps through it normally; the clip is a
     background-size trick rather than clip-path, because a
     clip-path on an inline box that wraps clips the whole
     bounding rect and takes the second row with it. */
  opacity: 0;
  /* AN EXPLICIT COLOUR, NOT currentColor. The text is painted
     through this gradient, which means `color` has to be
     transparent for background-clip to show — so currentColor
     inside the gradient resolved to transparent too and the
     quotes were painted with nothing. Only the names survived,
     because they set a colour of their own back. That is the
     whole bug: the wall was there, in the right place, at the
     right size, in transparent ink. */
  background-image: linear-gradient(to right,
    var(--kdb-neutral-20, #d9dde3) 0 calc(var(--chunk-in, 0) * 100%),
    transparent calc(var(--chunk-in, 0) * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  will-change: opacity;
}

/* THE NAME IS THE SAME HAND AND THE SAME SIZE, one shade up so
   it reads as the sentence naming who is talking rather than as
   a label attached to it. */
.k-ident__wall-who {
  position: relative;
  /* INLINE, NOT INLINE-BLOCK. An inline-block is an atom: the
     measure cannot break inside it, so a name that did not fit
     went to the next line whole and left a gap of its own width
     behind it — the only lines still falling short of the right
     edge were the ones ending in an attribution.

     THE COST IS REAL AND IT IS ACCEPTED. A name that lands at a
     line end now breaks across two lines like any other word,
     and its hover portrait breaks with it. Flush edges were
     asked for explicitly and a split chip is the rarer event —
     but it is the trade, and it is the first thing to revisit
     if the chips matter more than the rag. */
  display: inline;
  pointer-events: auto;
  border-radius: 0.24em;
  /* STRONGER THAN THE QUOTE, not merely different from it. The
     quote is the field and the name is the one thing in it that
     is meant to be picked out — at neutral-40 the two were close
     enough that the names read as part of the wash. */
  color: var(--kdb-neutral-60, #6b7480);
  -webkit-text-fill-color: currentColor;
}

/* ---- THE LOCKUP, CENTRED ------------------------------------
   system.css hangs the name off the start edge and only centres
   it under the narrow breakpoint. The sheet is symmetrical now —
   a single photograph on the centre line, two tiles dealing out
   of it to either side, and a wall running off both edges — and
   a name set hard left against all of that was the one thing on
   the beat that was not measured from the middle. */
.k-ident__name {
  justify-self: center;
  text-align: center;
  padding-inline-start: 0;
}

/* ============================================================
   THE SLATS · five panels over the single photograph
   ------------------------------------------------------------
   What replaced the twelve panes of glass. Same argument as the
   panes made — frosted glass you cannot see through is a wall —
   taken one step further: the reader can now choose which pane
   to see through, and the choosing is the whole interaction.

   THE PICTURE IS NEVER CUT UP. Each slat is a window onto the
   same photograph, offset so the five of them reconstruct it
   exactly. Opening one widens its window; the others narrow
   theirs. Nothing slides, nothing is duplicated, and the
   subject stays where he is while the frame changes shape
   around him — which is why it reads as a shelf opening rather
   than as five pictures rearranging.
   ============================================================ */
.k-ident__slats {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow: hidden;
}
.k-ident__slats > i {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  /* The join between two panels — half a pixel, the same as the
     panes it replaces. A full rule read as a drawn grid. */
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
  /* The window onto the photograph. The script writes both. */
  background-image: var(--slat-src);
  background-repeat: no-repeat;
  background-size: var(--slat-w, 100%) 100%;
  background-position: var(--slat-x, 0) 0;
  /* Frosted at rest, clear when open — driven as a number so
     the two states can meet in the middle mid-transition. */
  -webkit-backdrop-filter: blur(calc(var(--slat-frost, 1) * 6.5px)) saturate(0.92) brightness(1.03);
  backdrop-filter: blur(calc(var(--slat-frost, 1) * 6.5px)) saturate(0.92) brightness(1.03);
}

/* THE QUOTE SITS IN THE MIDDLE OF THE FRAME and does not move
   when the shelf does. It is over the glass, not behind it, so
   it stays legible whichever panel is open — a line that
   dissolved every time a slat cleared would be a caption
   fighting the thing it captions. */
.k-ident__slat-quote {
  position: absolute;
  inset-inline: 8%;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  z-index: 3;
  pointer-events: none;
  text-align: center;
  font-family: "Permanent Marker", var(--kdb-font-display, Archivo), cursive;
  font-size: clamp(0.95rem, 1.5vw, 1.4rem);
  line-height: 1.15;
  color: #f7f8fa;
  text-shadow: 0 1px 3px rgba(6, 11, 8, 0.6), 0 0 18px rgba(6, 11, 8, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .k-ident__slats > i { --slat-frost: 1; }
}

/* ---- THE FACE BEHIND THE NAME ------------------------------
   Pointing at a name puts that person's photograph over it, in
   exactly the box the name occupied — same width, same height,
   rounded — so the line's measure never changes and nothing
   below it reflows. It is the reference's move: a picture
   standing in for a word, in the word's own place.

   Five of the ten have a portrait. `[data-face]` is only set on
   those, so the other five are simply names that do not open
   rather than names that open onto nothing. */
.k-ident__wall-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.k-ident__wall-who[data-face] { cursor: help; }
.k-ident__wall-who[data-face]:hover .k-ident__wall-face,
.k-ident__wall-who[data-face]:focus-visible .k-ident__wall-face {
  opacity: 1;
  transform: scale(1);
}
/* The name goes under its own portrait rather than out from
   beside it — the chip is the name, seen another way. */
.k-ident__wall-who[data-face]:hover .k-ident__wall-name,
.k-ident__wall-who[data-face]:focus-visible .k-ident__wall-name {
  opacity: 0;
  transition: opacity 120ms linear;
}
.k-ident__wall-name { transition: opacity 200ms linear 60ms; }

/* THE FRAME LETS THE POINTER THROUGH ITS GAPS. It is a grid
   spanning the whole sheet, so with pointer events on it caught
   every name on the wall behind it. Its own children keep
   theirs — nothing on the readable page stops answering. */
.k-ident__frame { pointer-events: none; }
.k-ident__frame > *, .k-ident__frame button, .k-ident__frame a { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .k-ident__wall-face, .k-ident__wall-name { transition: none; }
}