.boring_wrap {
  --paper: #f4f2ee;
  --ink: #0d0d0d;
  --red: #fe3c18;
  --mute: rgba(13, 13, 13, 0.5);
  --rule: rgba(13, 13, 13, 0.14);
  --sans: 'Aeonik', 'Helvetica Neue', Arial, sans-serif;
  --dot: 'Doto', ui-monospace, monospace;
  --gut: clamp(16px, 2.2vw, 40px);
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  color: var(--ink);
  font-family: var(--sans);
}
.boring_wrap .boring_contain { position: relative; height: 260vh; }
.boring_wrap .boring_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); clip-path: inset(100% 0 0 0); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: clamp(1rem, 2vw, 2rem); padding: calc(var(--gut) + 4.6rem) var(--gut) var(--gut); }

.boring_wrap .boring_title { grid-column: 1 / -1; margin: 0; font-weight: 400; font-size: clamp(2.6rem, 6vw, 7.4rem); line-height: 0.9; letter-spacing: -0.05em; }
.boring_wrap .boring_line { display: block; }
.boring_wrap .boring_line.is-led { font-family: var(--dot); font-weight: 900; letter-spacing: -0.02em; color: var(--red); margin-top: 0.08em; }
.boring_wrap .boring_lede { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0; max-width: 30ch; color: var(--mute); font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.4; justify-self: end; text-align: right; }

.boring_wrap .boring_rows { grid-column: 1 / -1; align-self: end; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.boring_wrap .boring_row { display: grid; grid-template-columns: 4rem 1fr 1fr; align-items: baseline; gap: 1rem; padding: clamp(0.7rem, 1.4vh, 1.1rem) 0; border-bottom: 1px solid var(--rule); font-size: clamp(1.3rem, 2.3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; }
.boring_wrap .boring_n { font-family: var(--dot); font-weight: 800; font-size: 0.95rem; color: var(--mute); letter-spacing: 0; }
.boring_wrap .boring_out { position: relative; width: max-content; max-width: 100%; color: var(--mute); }
.boring_wrap .boring_out::after { content: ''; position: absolute; left: -0.1em; right: -0.1em; top: 55%; height: 0.08em; min-height: 2px; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--strike, 0)); }
.boring_wrap .boring_in { color: var(--ink); opacity: var(--add, 0); transform: translateY(calc((1 - var(--add, 0)) * 0.4em)); }
.boring_wrap .boring_keys { grid-column: 1 / -1; display: grid; grid-template-columns: 4rem 1fr 1fr; gap: 1rem; margin: 0.8rem 0 0; color: var(--mute); font-size: 0.8rem; }
.boring_wrap .boring_keys span:first-child { grid-column: 2; }

@media (max-width: 991px) {
  .boring_wrap .boring_lede { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; margin-top: 1rem; }
}
@media (max-width: 767px) {
  .boring_wrap .boring_contain { height: 280vh; }
  .boring_wrap .boring_stage { padding-top: 5.4rem; }
  .boring_wrap .boring_title { font-size: 11vw; }
  .boring_wrap .boring_lede { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; margin-top: 1rem; }
  .boring_wrap .boring_row { grid-template-columns: 2.4rem 1fr; gap: 0.2rem 0.6rem; font-size: 1.25rem; }
  .boring_wrap .boring_in { grid-column: 2; }
  .boring_wrap .boring_keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .boring_wrap .boring_out::after { transform: scaleX(1); }
  .boring_wrap .boring_in { opacity: 1; transform: none; }
}