:root {
  --ri-ink: #29251e;
  --ri-red: #d63229;
}

.type-editorial,
.type-poster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ri-ink);
}

.type-editorial {
  display: flex;
  align-items: center;
  padding: 11vh 3.8vw 7vh;
}

.type-editorial__intro { width: 50%; }
.type-kicker {
  margin: 0 0 22px;
  font: 500 10px/1.4 system-ui, sans-serif;
  letter-spacing: .16em;
}

.type-editorial .type-editorial__title {
  margin: 0;
  color: var(--ri-ink);
  font-family: 'RI Brand', Impact, sans-serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-align: left;
  white-space: normal;
}

.type-line { display: block; overflow: hidden; }
.type-line > span { display: block; }
.type-line:first-child { font-size: clamp(88px, 15.6vw, 290px); }
.type-line:last-child { font-size: clamp(60px, 10.45vw, 200px); }

.type-editorial__script {
  margin: 6px 0 0 4px;
  color: var(--ri-red);
  font: 400 clamp(34px, 4.5vw, 84px)/1 'Ms Madi', cursive;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.type-editorial__note {
  margin: 33px 0 0 4px;
  font: 400 12px/1.65 system-ui, sans-serif;
  letter-spacing: .01em;
}

.type-poster { padding: 15vh 4.2vw 13vh; }
.type-poster__edition {
  font: 500 10px/1.5 system-ui, sans-serif;
  letter-spacing: .18em;
  margin: 0 0 26px;
}

.type-poster .type-poster__title {
  color: var(--ri-ink);
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.01em;
  text-align: left;
  white-space: normal;
}

.type-poster__line { display: block; overflow: hidden; }
.type-poster__gone {
  display: block;
  font-size: clamp(112px, 20vw, 365px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ri-ink);
}
.type-poster__fishing {
  display: block;
  font-size: clamp(94px, 16.6vw, 305px);
  color: var(--ri-red);
}
.type-poster__line:last-child { margin-left: 9vw; }
.type-poster__script {
  position: absolute;
  left: 8.3vw;
  top: 41%;
  margin: 0;
  color: #fff8eb;
  font: 400 clamp(45px, 7vw, 128px)/1 'Ms Madi', cursive;
  white-space: nowrap;
  transform: rotate(-11deg);
  transform-origin: center;
}
.type-poster__caption {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 28px;
}
.type-poster__rule { width: 34px; height: 1px; background: currentColor; margin-top: 9px; }
.type-poster__caption p { font: 400 12px/1.55 system-ui, sans-serif; }

.frame .frame__tags { color: var(--ri-ink); font-size: 11px; }
.frame #cdawrap { position: fixed; right: 15px; bottom: 10px; }
.frame .frame__tags { position: fixed; left: 15px; bottom: 26px; }
.frame [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.scene-player { display: flex; align-items: center; gap: 18px; color: var(--ri-ink); }
.scene-player__count { font: 10px/1 monospace; letter-spacing: .05em; white-space: nowrap; }
.scene-player__track { width: 62px; height: 2px; overflow: hidden; background: #29251e25; }
.scene-player__track i { display: block; width: 100%; height: 100%; background: var(--ri-ink); transform: scaleX(0); transform-origin: left; }
.scene-player__toggle { min-height: 40px; min-width: 40px; padding: 10px 0; border: 0; background: none; color: inherit; font: 500 11px/1 system-ui, sans-serif; cursor: pointer; }
.scene-player__toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.scene-player__toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 847px) {
  .frame {
    grid-template-areas: 'title title title title' 'back github archive .' 'demos demos demos demos' 'tags tags tags tags' 'sponsor sponsor sponsor sponsor';
  }
}

@media (max-width: 1100px) and (min-width: 641px) {
  .type-editorial { padding-left: 3.5vw; }
  .type-editorial__intro { width: 53%; }
  .type-line:first-child { font-size: 14.8vw; }
  .type-line:last-child { font-size: 10.05vw; }
  .type-poster { padding-top: 21vh; }
  .type-poster__script { top: 46%; }
}

@media (max-width: 640px) {
  .type-editorial { align-items: flex-end; padding: 0 22px 17vh; }
  .type-editorial__intro { width: 100%; }
  .type-kicker { font-size: 8px; margin-bottom: 15px; letter-spacing: .13em; }
  .type-line:first-child { font-size: 24vw; }
  .type-line:last-child { font-size: 16vw; }
  .type-editorial__script { font-size: 40px; margin-top: 4px; }
  .type-editorial__note { margin-top: 18px; font-size: 10px; }
  [data-typography="editorial"] .hero-image img { object-position: 78% 50%; }
  .type-poster { padding: 0 22px 16vh; display: flex; flex-direction: column; justify-content: flex-end; }
  .type-poster__edition { font-size: 8px; margin-bottom: 18px; }
  .type-poster__gone { font-size: 33vw; }
  .type-poster__fishing { font-size: 28vw; }
  .type-poster__line:last-child { margin-left: 7vw; }
  .type-poster__script { top: auto; bottom: 28vh; left: 17vw; font-size: 54px; }
  .type-poster__caption { margin-top: 18px; }
  .type-poster__caption p { font-size: 10px; }
  [data-typography="poster"] .hero-image img { object-position: 76% 50%; }
  .frame #cdawrap { position: fixed; right: 15px; bottom: 10px; }
  .frame .frame__tags { position: fixed; left: 15px; bottom: 26px; font-size: 10px; }
  .scene-player { gap: 12px; }
  .scene-player__track { width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-player__track { display: none; }
}