/* ============================================================================
   jeanwwd — four loosened work-page layouts (W1 offset axis, W2 bands,
   W3 ribbon, W4 big text). Loaded only on a page whose layout is one of them;
   the accepted stylesheets are not touched.

   Everything here is set in tokens of tokens.css. The work title is --fs-h1
   (76u): the reference pages set 124-133u, and taking their scale is what made
   the previous round read as a copy.
   ========================================================================== */

/* --- shared: the first screen, masses of UNKNW / Paysend -------------------- */
.cw{display:block}
.cw-hero{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto auto 1fr;padding-top:calc(var(--nav-h) + var(--s-5))}
.cw-hero__top{padding:0 var(--m-page)}
.cw-hero .crumbs{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:var(--s-4)}
.cw-hero .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.cw-h1{max-width:var(--measure-h1);margin-top:var(--s-2)}
.cw-h1__dot{color:var(--ink-2)}
/* The band the reference leaves empty carries the meta block and, under it, the "Also for" line:
   both have to stand under the title and before the first media. Each layout moves the meta on to its
   own axis and gives it its own number of columns; the line under it never moves. */
.cw-hero__band{padding:var(--s-5) var(--m-page) var(--s-5)}
.cw-meta{max-width:none}
.cw-meta a.link{display:block;margin-top:var(--s-1)}
.cw-hero__also{margin-top:var(--s-4)}
.cw-hero .also{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cw-hero__media{align-self:end}
.cw-fig--hero .cover{width:100%}

/* --- shared: media blocks and captions -------------------------------------- */
.cw-fig{display:block;min-width:0}
.cw-fig .cover{position:relative}
.cw-cap{padding-top:var(--s-2);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2);border-top:var(--rule-w) solid var(--rule);margin-top:var(--s-2)}
.cw-fig--flat .cw-cap{border-top:0;margin-top:0}
.cw-rule{border:0;border-top:var(--rule-w) solid var(--rule);margin:0;transform-origin:left center}
.cw-next{margin-top:var(--s-7)}
.cw .others{margin-top:var(--s-7)}

/* --- W1: offset axis -------------------------------------------------------- */
/* The text column never moves; the media is the only thing that travels, out to
   the right edge of the screen and back inside the container. Captions sit on
   the outer edge, so the right margin becomes a second, quieter column. */
.cw--w1{--cw1-col:calc(760 * var(--u))}
.cw-hero--w1 .cw-hero__meta{margin-left:calc(var(--cw1-col) * .5)}
.cw-hero--w1 .cw-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
.cw-hero--w1 .cw-hero__also{max-width:var(--cw1-col)}
.cw-hero--w1 .cw-hero__media{margin-left:calc(var(--m-page) + var(--cw1-col) * .42);padding-right:0}
.cw1-text{padding:var(--s-7) var(--m-page) 0}
.cw1-col{max-width:var(--cw1-col)}
.cw1-media{margin-top:var(--s-6)}
.cw1-media--bleed{padding-left:calc(var(--m-page) + var(--cw1-col) * .5);padding-right:0}
.cw1-media--inset{width:min(var(--container), calc(100% - 2 * var(--m-page)));margin-left:var(--m-page)}
.cw-cap--outer{text-align:right}
.cw1-media--inset .cw-cap--outer{text-align:left}
.cw1-table{margin-top:var(--s-7);padding:0 var(--m-page)}
.cw1-table h3{margin-bottom:var(--s-4);max-width:var(--cw1-col)}
.cw1-table dl{display:block;border-top:var(--rule-w) solid var(--rule)}
.cw1-table dl > div{display:grid;grid-template-columns:minmax(0,var(--cw1-col)) minmax(0,1fr);column-gap:var(--gutter);padding:var(--s-3) 0;border-bottom:var(--rule-w) solid var(--rule);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cw1-table dt{color:var(--ink-2)}
.cw1-table dd b{font-weight:500}
.cw1-table dd span{color:var(--ink-2)}

/* --- W2: bands -------------------------------------------------------------- */
/* Whole width or a narrow column, nothing in between, and a 1 px rule on every
   seam (the Bureau device). Media has two sizes only: the screen, or a third. */
.cw-hero--w2 .cw-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
.cw-hero--w2 .cw-hero__also{border-top:var(--rule-w) solid var(--rule);padding-top:var(--s-3)}
.cw-hero--w2 .cw-hero__media{padding:0}
.cw2-band{padding:var(--s-5) var(--m-page)}
.cw2-band--full{padding-left:0;padding-right:0}
.cw2-band--third{display:grid;grid-template-columns:minmax(0,calc(620 * var(--u))) minmax(0,1fr);column-gap:var(--gutter)}
.cw2-band--third .cw-fig{grid-column:1}
.cw-cap--margin{border-top:0;margin-top:var(--s-2)}
.cw2-band--narrow{display:grid;grid-template-columns:minmax(0,calc(900 * var(--u))) minmax(0,1fr);column-gap:var(--gutter);align-items:start}
.cw2-col{max-width:var(--measure-lead)}
.cw2-note{color:var(--ink-2);max-width:calc(420 * var(--u))}
.cw2-band--rows h3{margin-bottom:var(--s-4)}
.cw2-rows{list-style:none;border-top:var(--rule-w) solid var(--rule)}
.cw2-rows li{display:grid;grid-template-columns:minmax(0,calc(260 * var(--u))) minmax(0,calc(560 * var(--u))) minmax(0,1fr);column-gap:var(--gutter);align-items:baseline;padding:var(--s-3) 0;border-bottom:var(--rule-w) solid var(--rule)}
.cw2-rows li b{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:400}
.cw2-row__t{font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cw2-row__x{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}
.cw--w2 .case-spread{margin-top:0}

/* --- W3: ribbon ------------------------------------------------------------- */
/* The media mass lives in the accepted Collins drag row (row.js drives every
   [data-drag-row] on the site); text stands between the ribbons as narrow tall
   insets that change sides. */
.cw--w3{--cw3-cell:max(300px, calc(620 * var(--u)))}
.cw-hero--w3 .cw-meta{grid-template-columns:repeat(5,minmax(0,1fr))}
.cw3-ribbon{margin-top:var(--s-7)}
.cw3-ribbon__lab{padding:0 var(--m-page);margin-bottom:var(--s-3)}
.cw3-row{list-style:none;display:flex;gap:var(--gutter);overflow-x:auto;scrollbar-width:none;padding:0 var(--m-page) var(--s-3);scroll-padding:0 var(--m-page)}
.cw3-row::-webkit-scrollbar{display:none}
.cw3-row.carousel-root{display:grid;grid-auto-columns:var(--cw3-cell);grid-auto-flow:column;grid-template-rows:auto;max-width:100%;overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none;cursor:grab}
.cw3-row.carousel-root[has-snap="false"]{scroll-snap-type:none}
.cw3-row.carousel-root.is-dragging{cursor:grabbing}
.cw3-row.carousel-root .cw3-cell{scroll-snap-align:start;display:block}
.cw3-row:focus-visible{outline:var(--rule-w) solid var(--focus);outline-offset:var(--s-1)}
.cw3-cell{flex:0 0 var(--cw3-cell);min-width:0}
.cw3-cell img,.cw3-cell video{pointer-events:none}
.cw3-pair{margin-top:var(--s-7)}
.cw3-pair__in{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));column-gap:var(--gutter)}
.cw3-inset{margin-top:var(--s-7);padding:0 var(--m-page);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.cw3-inset__in{grid-column:1 / span 4;border-top:var(--rule-w) solid var(--rule);padding-top:var(--s-3)}
.cw3-inset--right .cw3-inset__in{grid-column:8 / span 5}
.cw3-inset__n{display:block;margin-bottom:var(--s-3)}
.cw--w3 .numbers{margin-top:var(--s-7)}
.cw3-credits{margin-top:var(--s-7)}
.cw3-credits h3{margin-bottom:var(--s-3)}
.cw3-credits .credits{margin-left:0;margin-right:auto}

/* --- W4: big text ----------------------------------------------------------- */
/* Five sections, the text carries the page, media is rare and always the whole
   screen. Lead 62u and chapters 56u are existing steps of the scale. */
.cw-hero--w4 .cw-meta{grid-template-columns:repeat(2,minmax(0,1fr));font-size:var(--fs-body);line-height:var(--lh-body);gap:var(--s-4) var(--gutter);max-width:calc(1200 * var(--u))}
.cw-hero--w4 .cw-meta span{font-size:var(--fs-caption)}
.cw4-lead{margin-top:var(--s-7)}
.cw4-lead .t-lead-xl{max-width:calc(1200 * var(--u))}
.cw4-media{margin-top:var(--s-7)}
.cw-fig--screen .cover{height:88vh;aspect-ratio:auto!important}
.cw-cap--wide{padding:var(--s-2) var(--m-page) 0;border-top:0;margin-top:0}
.cw4-chap{margin-top:var(--s-7)}
.cw4-chap .t-h2{max-width:calc(1200 * var(--u))}
.cw4-facts{margin-top:var(--s-7)}
.cw4-facts h3,.cw4-credits h3{margin-bottom:var(--s-4)}
.cw4-facts ul{list-style:none;border-top:var(--rule-w) solid var(--rule)}
.cw4-facts li{display:grid;grid-template-columns:minmax(0,calc(460 * var(--u))) minmax(0,1fr);column-gap:var(--gutter);align-items:baseline;padding:var(--s-4) 0;border-bottom:var(--rule-w) solid var(--rule)}
.cw4-n{font-size:var(--fs-number);font-weight:var(--fw-number);line-height:1;letter-spacing:-.03em}
.cw4-ft b{display:block;font-weight:500;font-size:var(--fs-h3);line-height:var(--lh-h3)}
.cw4-ft{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}
.cw4-ft b{color:var(--ink)}
.cw4-credits{margin-top:var(--s-7)}
.cw4-credits ul{list-style:none}
.cw4-credits li + li{margin-top:var(--s-2)}

/* --- the Unseen frame carousel ---------------------------------------------- */
/* Their own numbers (prev/EVIDENCE-case.md): step = strip + 35, smoothing .1,
   edges +/-(strip + 33.5), drag .5 / .75 on touch, snap to the nearest frame. */
.cw-carousel{margin-top:var(--s-7)}
.cvc{--cvc-strip:max(60px, calc(96 * var(--u)));padding:0 var(--m-page)}
.cvc__view{position:relative;height:calc((100vw - 2 * var(--m-page)) * 9 / 16);overflow:hidden;touch-action:pan-y}
.cvc__slide{position:absolute;top:0;bottom:0;left:50%;display:flex;align-items:center;justify-content:center;will-change:transform}
.cvc__slide .cw-fig,.cvc__slide .cover{height:100%;width:100%}
.cvc__slide .cover{aspect-ratio:auto!important}
.js .cvc__view:not(.is-plain) .cvc__slide{width:var(--cvc-strip)}
.cvc__bar{display:flex;padding-left:calc(var(--round) + var(--s-3));justify-content:space-between;align-items:center;margin-top:var(--s-2);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cvc__btns{display:flex;gap:var(--s-3)}
.cvc__btns button{position:relative;overflow:hidden;padding-bottom:.25em}
.cvc__btns button:disabled{color:var(--ink-2);cursor:default}
.cvc__btns button i{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:translateX(-101%);display:block}
/* No JS, phone, reduced motion: a native snapping scroller, the counter follows it. */
.cvc__view.is-plain,.no-js .cvc__view{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:auto}
.cvc__view.is-plain::-webkit-scrollbar,.no-js .cvc__view::-webkit-scrollbar{display:none}
.cvc__view.is-plain .cvc__slide,.no-js .cvc__view .cvc__slide{position:relative;left:auto;top:auto;bottom:auto;flex:0 0 min(100%, calc(1100 * var(--u)));scroll-snap-align:center;transform:none!important;width:auto}
.cvc__view.is-plain .cover,.no-js .cvc__view .cover{aspect-ratio:16/9!important;height:auto}

/* --- phone: one column, nothing leaves the screen --------------------------- */
@media (max-width: 900px){
  .cw-hero{padding-top:calc(var(--nav-h) + var(--s-4))}
  .cw-hero__band{padding-left:var(--m-page);padding-right:var(--m-page)}
  .cw-hero--w1 .cw-hero__meta,.cw-hero__meta{margin-left:0}
  .cw--w1{--cw1-col:100%}
  .cw-hero--w1 .cw-meta,.cw-hero--w2 .cw-meta,.cw-hero--w3 .cw-meta,.cw-hero--w4 .cw-meta{grid-template-columns:1fr 1fr;font-size:var(--fs-caption);line-height:var(--lh-caption)}
  .cw-hero--w1 .cw-hero__also{max-width:none}
  .cw-hero--w1 .cw-hero__media{margin-left:0}
  .cw1-media--bleed,.cw1-media--inset{padding-left:var(--m-page);padding-right:var(--m-page);width:auto;margin-left:0}
  .cw-cap--outer{text-align:left}
  .cw1-table dl > div,.cw2-rows li,.cw4-facts li{grid-template-columns:1fr;row-gap:var(--s-1)}
  .cw2-band--third,.cw2-band--narrow{display:block}
  .cw2-note{margin-top:var(--s-3);max-width:none}
  .cw3-row{display:block;overflow:visible;padding:0 var(--m-page)}
  .cw3-cell + .cw3-cell{margin-top:var(--s-4)}
  .cw3-pair__in{grid-template-columns:1fr;row-gap:var(--s-4)}
  .cw3-inset{display:block}
  .cw3-inset--right .cw3-inset__in,.cw3-inset__in{grid-column:auto}
  .cw-fig--screen .cover{height:auto;aspect-ratio:16/9!important}
  .cvc{padding:0}
  .cvc__view{height:auto}
  .cvc__bar{padding:0 var(--m-page)}
}

@media (prefers-reduced-motion: reduce){
  .cw-rule{transform:none!important}
}