/* Coming Soon overlay (#coming-soon). Inner layout rules (.cs-grid, .cards, .dcard, .join...) live in site.css */
.cs { position: fixed; left: 0; right: 0; bottom: 0; top: var(--hh); z-index: 40; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--cray); color: var(--white); font-family: var(--f); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; -webkit-overflow-scrolling: touch }
.cs.open { opacity: 1; visibility: visible; transition: opacity .35s ease }
#coming-soon.cs { background: var(--cray) }
.cs[hidden] { display: none }
.cs * { box-sizing: border-box }
.cs-box { position: relative; overflow: hidden; min-height: calc(100% - 64px); max-width: 1440px; margin: 0 auto; padding-bottom: 10px; container-type: inline-size; container-name: fit }
.cs-box .cs-grid { padding-top: 56px }
.cs-box .h2 { font-size: clamp(40px, 5.6cqw, 84px) }
.cs-box .h2 .line > span { animation: lineup 1s cubic-bezier(.2, .9, .2, 1) both }
.cs-box .cards { margin-top: 48px }
.cs-box .cs-mq { margin-top: 56px }
.cs .notify { background: transparent; font-family: var(--f); cursor: pointer }
.cs .dcard { animation: cardin 1s cubic-bezier(.2, .9, .2, 1) both }
.cs .dcard.c2 { animation-delay: .12s }
.cs .dcard.c3 { animation-delay: .24s }
@container fit (max-width: 600px) {
  .cs-box .cs-grid { padding-top: 30px; grid-template-columns: minmax(0, 1fr) }
  .cs-box .cards { max-width: none; width: 100%; grid-template-columns: minmax(0, 1fr) }
  .cs-box .dcard { min-width: 0 }
}