/* MedFilesNow visual kit — halftone side bars, documentary plates, pull stack.
   Requires brand-v2/final/tokens.css. Square corners, ink + paper only, no accent colour.

   Halftone side bar markup (static, works without JS):
   <section class="ht-host">
     <div class="ht-bar ht-bar--right" style="--ht-o:.16" aria-hidden="true">
       <picture>
         <source media="(max-width:760px)" srcset="halftones/NAME-medium-band.webp">
         <img src="halftones/NAME-medium-480x1200-right.webp"
              srcset="halftones/NAME-medium-480x1200-right.webp 480w, halftones/NAME-medium-640x1600-right.webp 640w"
              sizes="(max-width:760px) 100vw, 36vw" alt="" loading="lazy" decoding="async">
       </picture>
       <canvas data-ht data-src="halftones/src/NAME-dev.webp" data-src-band="halftones/src/NAME-band-dev.webp"
               data-cell="9" data-edge="left"></canvas>   <!-- optional: motion.js develops it -->
     </div>
     ...section content...
   </section>
   Side naming: --left bar sits on the left, its RIGHT edge fades (text is to the right). */

.ht-host{position:relative;isolation:isolate;overflow:hidden}
.ht-host>:not(.ht-bar){position:relative;z-index:1}

.ht-bar{
  --ht-w:36%;          /* 28-42% on desktop */
  --ht-o:.16;          /* 0.10-0.22, see VISUAL-SPEC contrast table */
  --ht-band:200px;     /* mobile top band, 160-220px */
  position:absolute;top:0;bottom:0;width:var(--ht-w);z-index:0;
  pointer-events:none;opacity:var(--ht-o);overflow:hidden;
  contain:strict;
}
.ht-bar--left{left:0}
.ht-bar--right{right:0}
.ht-bar img,.ht-bar picture,.ht-bar canvas{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--ht-pos,50% 50%);
}
.ht-bar canvas{bottom:auto;opacity:0;transition:opacity .4s linear;will-change:transform}
/* when the canvas has developed, it replaces the static image */
.ht-bar.ht-live canvas{opacity:1}
.ht-bar.ht-live picture,.ht-bar.ht-live>img{visibility:hidden}

/* Width presets */
.ht-w-28{--ht-w:28%}.ht-w-34{--ht-w:34%}.ht-w-42{--ht-w:42%}
/* Opacity presets (paper surfaces). Body copy over the bar must use --ink; see spec. */
.ht-o-10{--ht-o:.10}.ht-o-14{--ht-o:.14}.ht-o-18{--ht-o:.18}.ht-o-22{--ht-o:.22}

/* On ink bands: paper-coloured dots. Static images are inverted, canvas gets data-color="#FAF9F6". */
.ht-bar--reverse img{filter:invert(1)}

/* Light variant for legal pages (privacy, terms): fine cells, 0.08-0.10, bar only in the margin */
.ht-bar--light{--ht-o:.09;--ht-w:24%}

/* ---------- CSS-only fallback: radial-gradient dot mask over a grayscale photo ----------
   <div class="ht-css ht-bar ht-bar--left" style="--ht-img:url(halftones/src/NAME-bar-gray.webp);--ht-cell:9px">
     <i class="ht-css__dots"></i></div>
   Two offset dot lattices = a 45deg screen. Dot size is fixed; tone comes from the photo under it. */
.ht-css{--ht-cell:9px;--ht-dot:46%}
.ht-css.ht-bar--left{-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.ht-css.ht-bar--right{-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent);mask-image:linear-gradient(270deg,#000 55%,transparent)}
.ht-css__dots{
  position:absolute;inset:0;display:block;
  background:var(--ht-img) var(--ht-pos,50% 50%)/cover no-repeat;
  filter:grayscale(1) contrast(1.6) brightness(.82);
  -webkit-mask-image:radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 4%)),radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 4%));
          mask-image:radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 4%)),radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 4%));
  -webkit-mask-size:var(--ht-cell) var(--ht-cell);mask-size:var(--ht-cell) var(--ht-cell);
  -webkit-mask-position:0 0,calc(var(--ht-cell)/2) calc(var(--ht-cell)/2);mask-position:0 0,calc(var(--ht-cell)/2) calc(var(--ht-cell)/2);
}

/* ---------- Mobile: bar becomes a top band behind the section heading ---------- */
@media (max-width:760px){
  .ht-bar{top:0;left:0;right:0;bottom:auto;width:auto;height:var(--ht-band)}
  .ht-bar canvas{height:calc(var(--ht-band) * 1.06)}
  .ht-css.ht-bar--left,.ht-css.ht-bar--right{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
  .ht-band-160{--ht-band:160px}.ht-band-220{--ht-band:220px}
}

@media (prefers-reduced-motion:reduce){.ht-bar canvas{transition:none;transform:none!important}}
@media print{.ht-bar{display:none}}
@media (forced-colors:active){.ht-bar{display:none}}

/* ---------- Documentary plate with split caption (CertainTIQ pattern) ---------- */
.plate{margin:0}
.plate__frame{position:relative;overflow:hidden;background:var(--paper-2)}
.plate__frame img{display:block;width:100%;height:auto}
.plate figcaption{display:flex;justify-content:space-between;gap:24px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px;
  font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.plate figcaption span:first-child{color:var(--ink-2)}
@media (max-width:760px){.plate figcaption{flex-direction:column;gap:4px}}

/* ---------- Pull: record lines filling into a stack, with counters ---------- */
.pull{--pull-ink:var(--ink);--pull-rule:var(--line);position:relative;border:1px solid var(--ink);background:var(--white);
  padding:16px 18px 18px;font-family:var(--f-mono);color:var(--ink);max-width:420px}
.pull__head{display:flex;justify-content:space-between;font:500 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--pull-rule);padding-bottom:10px;margin:0 0 10px}
.pull__rows{list-style:none;margin:0;padding:0}
.pull__row{display:grid;grid-template-columns:28px 1fr;align-items:center;height:22px;border-bottom:1px solid var(--pull-rule);
  font-size:11px;color:var(--ink-3)}
.pull__bar{position:relative;height:6px}
.pull__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--pull-ink);transform:scaleX(0);transform-origin:left}
.pull__stack{position:relative;height:44px;margin:14px 0 12px;border-bottom:2px solid var(--pull-ink)}
.pull__stack i{position:absolute;left:calc(6% + var(--a));right:calc(6% + var(--b));bottom:calc(var(--s) * 3.5px + 2px);height:1px;
  background:var(--pull-ink);opacity:0;transform:translateY(-18px)}
.pull__count{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.pull__count dt{font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pull__count dd{margin:2px 0 0;font:500 28px/1.1 var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pull__note{margin:10px 0 0;font:400 11px/1.4 var(--f-mono);color:var(--ink-3)}
.pull.is-run .pull__bar i{transform:none;transition:transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--i) * 180ms)}
.pull.is-run .pull__stack i{opacity:1;transform:none;transition:opacity .3s linear calc(900ms + var(--s) * 90ms),transform .5s cubic-bezier(.22,.61,.36,1) calc(900ms + var(--s) * 90ms)}
.pull--ink{--pull-ink:var(--paper);--pull-rule:#2A2B2C;background:var(--ink-bg);border-color:#3A3B3C;color:var(--paper)}
.pull--ink .pull__row,.pull--ink .pull__count dt,.pull--ink .pull__note{color:#A9A8A3}
.pull--compact{max-width:none;padding:12px 14px}
.pull--compact .pull__count dd{font-size:22px}
@media (prefers-reduced-motion:reduce){.pull .pull__bar i,.pull .pull__stack i{transition:none!important;transform:none;opacity:1}}

/* =====================================================================
   v1.1 (Oct 21) — soft transitions + hero film
   ===================================================================== */
:root{--ease-soft:cubic-bezier(.22,.61,.36,1);--feather:120px}

/* ---------- Section feathering: the next section fades in from the previous surface ----------
   <section class="sec band-2 feather from-paper">  — gradient from paper to this section's own surface.
   80-160px (--feather). On ink bands keep padding-top >= feather + 24px so text never sits on the blend. */
.feather{position:relative;isolation:isolate}
.feather::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--feather);z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--feather-from) 0%,color-mix(in srgb,var(--feather-from) 55%,transparent) 38%,transparent 100%)}
.feather>*{position:relative;z-index:1}
.feather>.ht-bar{position:absolute;z-index:0}
.from-paper{--feather-from:var(--paper)}
.from-paper-2{--feather-from:var(--paper-2)}
.from-ink{--feather-from:var(--ink-bg)}
.feather-80{--feather:80px}.feather-120{--feather:120px}.feather-160{--feather:160px}
.band-ink.feather{padding-top:max(var(--sec,96px),calc(var(--feather) + 24px))}
/* bottom feather when the next section can't carry a class */
.feather-out{position:relative}
.feather-out::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--feather);pointer-events:none;
  background:linear-gradient(to top,var(--feather-to) 0%,transparent 100%)}
.to-paper{--feather-to:var(--paper)}.to-paper-2{--feather-to:var(--paper-2)}.to-ink{--feather-to:var(--ink-bg)}

/* ---------- Halftone bars dissolve top and bottom into neighbouring sections ---------- */
.ht-bar--dissolve{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ht-dissolve,96px),#000 calc(100% - var(--ht-dissolve,96px)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ht-dissolve,96px),#000 calc(100% - var(--ht-dissolve,96px)),transparent 100%)}
/* CSS-only bars already carry a side mask: combine both */
.ht-css.ht-bar--dissolve.ht-bar--left{-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);mask-composite:intersect}
.ht-css.ht-bar--dissolve.ht-bar--right{-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(270deg,#000 55%,transparent),linear-gradient(to bottom,transparent,#000 96px,#000 calc(100% - 96px),transparent);mask-composite:intersect}
@media (max-width:760px){.ht-bar--dissolve{--ht-dissolve:0px;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}}

/* ---------- Plate edges: feathered mask or paper vignette ---------- */
.plate--feather .plate__frame{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect;background:none}
.plate--vignette .plate__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plate-bg,var(--paper)) 70%,transparent),inset 0 0 64px 18px color-mix(in srgb,var(--plate-bg,var(--paper)) 55%,transparent)}
/* full-bleed wide plates: dissolve bottom into the next section instead of a hard edge */
.plate--fade-bottom .plate__frame{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

/* ---------- Hover and state changes: never instant ---------- */
.soft-ui a,.soft-ui button,.soft-ui .btn,.soft-ui [role=tab],.soft-ui summary{
  transition:color .24s var(--ease-soft),background-color .24s var(--ease-soft),border-color .24s var(--ease-soft),
             text-decoration-color .24s var(--ease-soft),opacity .24s var(--ease-soft),box-shadow .24s var(--ease-soft)}
.soft-ui details>:not(summary){animation:soft-in .32s var(--ease-soft)}
@keyframes soft-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.soft-ui *{transition-duration:.01ms!important;animation:none!important}}

/* ---------- Hero film ---------- */
.film{margin:0;position:relative}
.film__frame{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--paper-2) center/cover no-repeat}
.film__frame video,.film__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film__frame video{opacity:0;transition:opacity .9s var(--ease-soft)}
.film--live .film__frame video{opacity:1}
.film--still .film__frame video{opacity:1} /* poster shows; no sources are ever attached */
.film__toggle{position:absolute;right:12px;bottom:calc(12px + var(--film-cap,0px));z-index:2;height:32px;padding:0 12px;border:1px solid var(--paper);
  background:color-mix(in srgb,var(--ink-bg) 72%,transparent);color:var(--paper);font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:0}
.film__toggle:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.film figcaption{display:flex;justify-content:space-between;gap:24px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px;
  font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){.film__frame{aspect-ratio:4/5}.film figcaption{flex-direction:column;gap:4px}}

/* Film seen through the halftone screen, inside a side bar (idea / variant F) */
.film--dots .film__frame{aspect-ratio:auto;position:absolute;inset:0;background:none}
.film--dots video{filter:grayscale(1) contrast(1.9) brightness(.7)}
.film--dots .film__frame{--ht-cell:8px;--ht-dot:44%;
  -webkit-mask-image:radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 5%)),radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 5%));
          mask-image:radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 5%)),radial-gradient(circle,#000 var(--ht-dot),transparent calc(var(--ht-dot) + 5%));
  -webkit-mask-size:var(--ht-cell) var(--ht-cell);mask-size:var(--ht-cell) var(--ht-cell);
  -webkit-mask-position:0 0,calc(var(--ht-cell)/2) calc(var(--ht-cell)/2);mask-position:0 0,calc(var(--ht-cell)/2) calc(var(--ht-cell)/2)}

.ht-bar .film__toggle{pointer-events:auto}
.film--dots{position:absolute;inset:0}