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

:root {
  --matte: #990000;
  --top-pad: 8;
  --portrait-cap: 60;
  --phone-cap: 50;
  --work-cap: var(--portrait-cap);
  --gap-basis: 100;
  --marquee-margin-bottom: 8;
  --marquee-size: clamp(0.81rem, 1.98vmin, 1.44rem);
  --marquee-word-gap: clamp(0.8rem, 3.6vw, 5.6rem);
  --marquee-bleed: min(50vw, 400px);
  --marquee-gap: min(calc(8 * var(--gap-basis) * 1dvh / 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) * 1dvh
  );
}

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

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

body {
  display: flex;
  flex-direction: column;
  inline-size: max-content;
  block-size: 100vh;
  block-size: 100dvh;
}

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

.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) * 1vh);
    max-block-size: calc(var(--work-cap) * 1dvh);
  }
  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)) * 1vh);
    block-size: calc((var(--work-cap) + var(--top-pad)) * 1dvh);
  }
}

#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) * 1vh);
  margin-block: var(--marquee-gap) calc(var(--marquee-margin-bottom) * 1dvh);
  overflow: hidden;
  padding-block: 0.25em;
  background: #004080;
  color: #ffffff;
  font-family: Arial, 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;
  user-select: none;
  -webkit-user-select: none;
  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, -33.3333%), 0, 0);
  }
}