*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Originalet klipper x-overflow på BÅDA. Utan html-regeln rapporterar
   scrollWidth 400 vid 390 på case-ytan, där mediablocken blöder 10 px. */
html { background: var(--paper); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  overflow-x: clip;          /* originalets egen regel: html+body{overflow:clip} */
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; font-weight: inherit; font-size: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ui {
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}

/* --- mediablock -----------------------------------------------------------
   Skelettet visar aldrig originalets film. Varje block är dess uppmätta
   dominantfärg, i exakt uppmätt aspect, med rolletikett. */
.media {
  position: relative;
  display: block;
  width: 100%;
  background: var(--dom, #cfcfcf);
  overflow: hidden;
}
.media::after {
  content: attr(data-role);
  position: absolute; left: 8px; bottom: 7px;
  font-size: 8px; line-height: 8px; letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff; mix-blend-mode: difference;
  opacity: .55;
}