*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --vh-unit: 1vh;
  --matte: #990000;
  color-scheme: only light;
  --top-pad: 8;
  --portrait-cap: 60;
  --phone-cap: 50;
  --work-cap: var(--portrait-cap);
  --gap-basis: 100;
  --marquee-margin-bottom: 8;
  --marquee-size: max(0.81rem, 1.98vmin);
  --marquee-word-gap: clamp(3em, 3.6vw, 4em);
  --marquee-bleed: min(50vw, 400px);
  --marquee-gap: min(calc(8 * var(--gap-basis) * var(--vh-unit) / 100), 5.4rem);
  --marquee-cycle: 87.5s;
  --bar-height: calc(1.75 * var(--marquee-size));
  --bar-room: calc(
    var(--marquee-gap) + var(--bar-height) + var(--marquee-margin-bottom) * var(--vh-unit)
  );
}

@supports (height: 1dvh) {
  :root {
    --vh-unit: 1dvh;
  }
}

html {
  overflow-x: auto;
  overflow-y: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--matte);
  color: #fff;
  overscroll-behavior-y: none;
  user-select: none;
  -webkit-user-select: none;
}

html,
body,
#marquee,
.work {
  forced-color-adjust: none;
}

body {
  display: flex;
  flex-direction: column;
  inline-size: max-content;
  block-size: calc(100 * var(--vh-unit));
}

#strip {
  display: flex;
  align-items: center;
  order: 1;
  flex: 0 0 auto;
  block-size: calc(100 * var(--vh-unit) - var(--bar-room));
  box-sizing: border-box;
  padding-block-start: calc(var(--top-pad) * var(--vh-unit));
}

.work {
  flex: 0 0 auto;
  display: block;
  inline-size: auto;
  block-size: min(100%, calc(88vw / var(--ar)));
  background: var(--matte);
}

.work[data-trim] {
  clip-path: inset(0 var(--trim-r, 0px) 0 var(--trim-l, 0px));
  margin-inline: calc(-1 * var(--trim-l, 0px)) calc(-1 * var(--trim-r, 0px));
}

@media (orientation: portrait) and (max-width: 500px) {
  :root {
    --work-cap: var(--phone-cap);
  }
}

@media (orientation: portrait) {
  :root {
    --gap-basis: var(--work-cap);
  }
  .work {
    block-size: 100%;
    max-block-size: calc(var(--work-cap) * var(--vh-unit));
  }
  body {
    justify-content: center;
  }
  body::before {
    content: '';
    order: 0;
    flex: var(--top-pad) 1 0;
  }
  body::after {
    content: '';
    order: 3;
    flex: var(--marquee-margin-bottom) 1 0;
  }
  #strip {
    flex: 0 1 auto;
    block-size: calc((var(--work-cap) + var(--top-pad)) * var(--vh-unit));
  }
}

#marquee {
  position: sticky;
  inset-inline-start: calc(-1 * var(--marquee-bleed));
  inline-size: calc(100vw + 2 * var(--marquee-bleed));
  margin-inline: calc(-1 * var(--marquee-bleed));
  order: 2;
  flex: 0 0 auto;
  margin-block: var(--marquee-gap) calc(var(--marquee-margin-bottom) * var(--vh-unit));
  overflow: hidden;
  padding-block: 0.25em;
  background: #004080;
  color: #ffffff;
  font-family: Arial, 'Liberation Sans', 'Nimbus Sans', Arimo, sans-serif;
  font-size: var(--marquee-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: calc(var(--marquee-size) * 1.25);
  white-space: nowrap;
  touch-action: manipulation;
}

.marquee-track {
  display: flex;
  align-items: center;
  inline-size: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll var(--marquee-cycle) linear infinite;
}

.marquee-item {
  margin-inline-end: var(--marquee-word-gap);
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--marquee-shift, -10%), 0, 0);
  }
}