/* ============================================================================
   ESSAY PAGES — inline media that expands as you read.
   Loads after case.css, only on case pages flagged essay=True in scripts/build_case_shells.py.

   The device: a paragraph carries tiny thumbnails INLINE with the words (a "token", .em). The
   line-height is opened up so the thumbs sit in the line without breaking the paragraph's rhythm.
   When a token reaches the middle of the viewport (or is tapped) it opens: it floats to the edge
   of the measure, the text wraps around it, and if it is a clip it plays (muted). Once it scrolls out of
   the reading band it shrinks back into its line (essay.js keeps the words being read from jumping).
   Tapping an open token closes it again. Phones: an open token becomes a full-width block instead of a float.

   Token kinds (data-kind): photo · clip · doc. Side (data-side): left · right (alternates by default).
   Size (data-size): normal · wide (the money shots take the whole measure).
   Calm modes (reduced-motion / .a11y): every token starts open, nothing moves, clips get controls.
   ============================================================================ */

.cs-body--essay{display:flow-root; overflow-anchor:none}   /* flow-root: a late float never hangs into the footer. overflow-anchor: essay.js anchors the reader itself */
.cs-body--essay p.body{font-size:1.1rem; line-height:1.95; max-width:var(--maxread)}
.cs-body--essay h2, .cs-body--essay .cs-row, .cs-body--essay .tm, .cs-body--essay .pull, .cs-body--essay .cs-next{clear:both}
.cs-body--essay p.body + p.body{margin-top:0}

/* ---- the token, closed: a thumb in the line ---- */
.em{
  --ar:16/9; --tw:2.6em;                     /* aspect ratio of the media, and the closed width */
  display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box;
  width:var(--tw); aspect-ratio:var(--ar); height:auto;
  margin:-.5em .24em -.35em;                 /* negative vertical margins keep the line box at 1.95em */
  padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--panel); color:inherit; font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:box-shadow .4s ease, border-radius .3s ease;   /* never width or margin: animating those re-wraps the paragraph every frame */
  transform-origin:top left; isolation:isolate;
}
.em[data-kind="doc"]{--ar:17/22; --tw:1.75em}           /* a little page, portrait */
.em:hover, .em:focus-visible{box-shadow:0 0 0 2px var(--chan)}
.em:focus-visible{outline:none}
.em-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; will-change:transform}
.em > video.em-media{display:none; object-fit:cover; background:#000}
.em-static{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; mix-blend-mode:screen; pointer-events:none; z-index:3}
.em-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 12px 9px; text-align:left;
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.35; color:var(--cream);
  background:linear-gradient(to top, rgba(18,25,18,.88), rgba(18,25,18,0)); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.em-cap b{color:var(--chan); margin-right:.6em}
.em-cap b::before{content:""; display:inline-block; width:12px; height:7px; background:var(--chan); margin-right:.5em; vertical-align:1px}

/* ---- the token, open: floats to the edge, the text wraps ---- */
/* The size change lands in one layout pass; essay.js animates the token's transform from where it sat in the
   line (a FLIP), so the words around it re-wrap once instead of on every frame of a width transition. */
.em.is-flip{transition:transform .46s cubic-bezier(.22,.7,.2,1), box-shadow .4s ease; will-change:transform}
.em.is-open{
  float:left; clear:both; margin:.3em 1.5em .5em 0; border-radius:12px; vertical-align:baseline;
}   /* clear:both: two open floats never sit side by side and squeeze the words between them into a sliver */
.em.is-open{width:min(46%, 440px)}
.em.is-open[data-side="right"]{float:right; margin:.3em 0 .5em 1.5em}
.em.is-open[data-kind="doc"]{width:min(38%, 340px)}
.em.is-open[data-size="wide"]{width:100%; float:none; display:block; margin:.6em 0 .9em}
.em.is-open .em-cap{opacity:1}
.em.is-open .em-cap{transition-delay:.35s}
.em.is-open > video.em-media{display:block}
.em.is-live > img.em-media{opacity:0}
.em.is-open[data-kind="doc"]{border-color:rgba(217,211,153,.35); box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}
.em.is-open[data-kind="doc"] .em-media{object-fit:contain; background:#efe9d3}

.em .em-media{transition:opacity .4s ease}

/* phones: an open token is a full-width block, never a float (no room to wrap) */
@media(max-width:640px){
  .cs-body--essay p.body{line-height:1.9}
  .em.is-open{float:none; display:block; margin:.55em 0 .8em}
  .em.is-open, .em.is-open[data-kind="doc"]{width:100%}
  .em.is-open[data-kind="doc"]{width:78%; margin-left:auto; margin-right:auto}
}

/* calm modes: everything open, nothing animates, clips get their controls */
:root.a11y .em, :root.a11y .em .em-media, :root.a11y .em-cap{transition:none}
@media (prefers-reduced-motion:reduce){ .em, .em .em-media, .em-cap{transition:none} }

/* cartoon swearing: a word censored with shuffling glyphs (essay.js) */
.cuss{font-family:var(--mono); font-weight:700; letter-spacing:.06em; color:var(--chan); white-space:nowrap}