/* round 7: the story stays at the top; after it the page is a page, its blocks scrolling over the cards, which settle
   beside each block and travel with it (engine.js) */
.story { height: var(--story, 1360vh); }

/* the header grows a menu once the story is behind: the same small type, no bar */
.top__nav { display: flex; gap: clamp(16px, 2.2vw, 34px); align-items: center; }
.top__nav a { font-weight: 550; color: var(--ink-mid); transition: color 0.2s ease; }
.top__nav a:hover { color: var(--ink); }
.top__nav .top__talk { color: var(--ink); }

/* the words that come and go over the story ([data-show]) */
.say { position: absolute; opacity: 0; visibility: hidden; }
.say--suit { bottom: 15vh; width: 26vw; text-align: center; }
.say--suit b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.1vw, 38px); letter-spacing: -0.025em; line-height: 1.05; }
.say--suit span { display: block; margin-top: 0.4em; font-size: clamp(15px, 1.05vw, 18px); color: var(--ink-mid); }
.say--l { left: 12vw; }
.say--r { right: 12vw; }
.say--heart b { color: #C62A1F; }
.say--mid { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(26rem, 30vw); text-align: center; }
.say--mid p { font-family: var(--display); font-size: clamp(24px, 1.9vw, 34px); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* the page */
.page { position: relative; z-index: 2; }
.sx { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 14vh var(--g); }
.sx__in { width: 100%; max-width: 1360px; margin: 0 auto; display: flex; }
.sx--l .sx__in { justify-content: flex-start; }
.sx--r .sx__in { justify-content: flex-end; }
.sx--c .sx__in { justify-content: center; text-align: center; }
.tx { max-width: 33rem; }
.sx--c .tx { max-width: min(24rem, 30vw); }
.tag { display: inline-flex; align-items: center; gap: 0.5em; font-size: 15px; font-weight: 600; color: var(--ink-mid); margin-bottom: 1.1em; }
.tag svg { width: 0.95em; height: 0.95em; }
.tag--heart svg { color: var(--red); }
.h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.5vw, 62px); line-height: 1.0; letter-spacing: -0.032em; text-wrap: balance; }
.sx--c .h2 { font-size: clamp(26px, 2.3vw, 40px); }
.lede { margin-top: 0.9em; font-size: clamp(17px, 1.22vw, 21px); line-height: 1.5; color: var(--ink-mid); text-wrap: pretty; }
.lede + .lede { margin-top: 0.6em; }

/* the cards on the page: boxes the shape of a playing card (63 by 88), each the top card of a deck of real cards
   lying under it (engine.js, los mazos) */
.sx--deck .sx__in { flex-direction: column; gap: 4.5vh; }
.sx--deck { padding: 10vh var(--g); }
.deck-head { max-width: 44rem; }
.deck-row { display: flex; gap: clamp(20px, 3vw, 56px); align-items: flex-start; flex-wrap: wrap; }
.pc { position: relative; flex: none; aspect-ratio: 63 / 88; width: clamp(230px, 18vw, 300px); background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.08); padding: clamp(52px, 4vw, 66px) clamp(24px, 2vw, 34px) clamp(24px, 2vw, 32px); display: flex; flex-direction: column; }
.pc--sm { width: clamp(196px, 14vw, 236px); padding: clamp(46px, 3.4vw, 56px) clamp(18px, 1.4vw, 24px) clamp(18px, 1.4vw, 24px); }
.pc__ix { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1; }
.pc__ix svg { width: 15px; height: 15px; }
.pc__ix--tl { left: 7%; top: 5%; }
.pc__ix--br { right: 7%; bottom: 5%; transform: rotate(180deg); }
.pc--red .pc__ix { color: #C62A1F; }
.pc h3 { margin: 0.35em 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2vw, 34px); letter-spacing: -0.025em; line-height: 1.02; }
.pc--sm h3 { font-size: clamp(20px, 1.5vw, 26px); }
.pc p { margin: 0.75em 0 0; font-size: clamp(14px, 0.98vw, 16.5px); line-height: 1.45; color: var(--ink-mid); }
.pc .price { margin-top: auto; font-family: var(--display); font-weight: 750; font-size: clamp(34px, 2.8vw, 48px); letter-spacing: -0.04em; line-height: 1; }
.pc .price small { font-family: var(--text); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-mid); margin-left: 4px; }
.pc ul { margin: 0.9em 0 0; padding: 0; list-style: none; font-size: clamp(13.5px, 0.92vw, 15.5px); line-height: 1.4; color: var(--ink-mid); }
.pc li + li { margin-top: 0.3em; }
.note { font-size: 15px; color: var(--ink-mid); max-width: 44rem; }
.note a, .link { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* a block pinned while its cards play through ([data-pin]); its text comes in beats */
.sx--pin { display: block; height: 330vh; padding: 0; }
.pin__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pin__head { position: absolute; left: 50%; top: 11vh; transform: translateX(-50%); width: min(46rem, 80vw); text-align: center; }
.beat { position: absolute; opacity: 0; visibility: hidden; }
.beat--t, .beat--bl, .beat--br { left: 50%; top: 16vh; transform: translateX(-50%); width: min(44rem, 80vw); text-align: center; }

.beat .h2 { font-size: clamp(28px, 2.6vw, 46px); }
.pin__side { position: absolute; top: 50%; transform: translateY(-50%); max-width: 30rem; }
.pin__side--r { right: calc(var(--g) + 3.5vw); }
.pin__side--l { left: calc(var(--g) + 3.5vw); }
.ph-wrap { display: grid; }
.ph { grid-area: 1 / 1; }
.ph--b { opacity: 0; }

/* the figures: one band across the middle of the screen, in the hole the grid leaves */
.sx--band .sx__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; max-width: min(78vw, 1200px); }
.sx--band .stat { cursor: default; opacity: 0.42; transition: opacity 0.35s ease; }
.sx--band .stat.is-on { opacity: 1; }
.band-head { position: absolute; left: 50%; top: 9vh; transform: translateX(-50%); width: 80vw; text-align: center; }
.band-head .h2 { font-size: clamp(24px, 2vw, 34px); color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25); }

/* the close and the foot of the page */
.go { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.3em; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.6vw, 28px);
  color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.go svg { width: 0.9em; height: 0.9em; }
.foot { position: relative; z-index: 2; padding: 6vh var(--g) 5vh; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-mid); border-top: 1px solid rgba(22, 23, 27, 0.1); background: var(--ground); }
.foot__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); }
.foot__brand svg { width: 16px; height: 19px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* text comes in as its block arrives */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .rv.in { opacity: 1; transform: none; }
}

/* round 7, second pass */
.top { transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; }
.top.is-solid { background: rgba(241, 242, 244, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(22, 23, 27, 0.06); }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 0.85em 1.25em; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; line-height: 1; text-decoration: none; background: var(--ink); color: #fff; transition: transform 0.2s var(--ease), background-color 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1em; height: 1em; }
.btn--red { background: #C62A1F; }
.btn--red:hover { background: #B02318; }
.top .btn--ink { padding: 0.6em 0.95em; font-size: 13.5px; color: #fff; }
.hero__where { display: block; margin-top: 0.35em; font-size: 0.86em; color: #6A6D76; }
.hero__acts { margin-top: 1.7em; display: flex; align-items: center; gap: 24px; pointer-events: auto; }
.stage .hero { pointer-events: auto; }
.acts { margin-top: 1.4em; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pc__ask { margin-top: auto; padding-top: 1em; font-size: 14.5px; font-weight: 650; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.pc--red .pc__ask { color: #C62A1F; }
.sx--split .sx__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 5vw; }
.sx--split .deck-head { max-width: 30rem; }
.sx--split .deck-row { flex-wrap: nowrap; }
.sx--plans .deck-row { justify-content: space-between; }
.sx--band .stat { opacity: 0.6; }
.say--l { left: 6.5vw; }
.say--r { right: 6.5vw; }
.beat--t, .beat--bl, .beat--br { top: 12vh; }
.pin__head { top: 7.5vh; }
.pc .price--word { font-size: clamp(26px, 2vw, 34px); }
.pc .price--word small { display: block; margin: 0.35em 0 0; }

/* round 7, last pass */
.sx--band .sx__in { row-gap: 3.2vh; }
.band-title { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.1vw, 36px); letter-spacing: -0.025em; line-height: 1.05; }
.sx--band .stat b { font-size: clamp(50px, 5.4vw, 100px); }
.sx--band .stat.stat--red b { color: #C62A1F; }
.sx--band .stat { opacity: 0.72; }
.btn--big { margin-top: 1.4em; font-size: 19px; padding: 0.95em 1.4em; }
.sx--plans { padding-top: 15vh; }
/* a line set over a full screen of cards sits on a card of its own */
.say--card { width: min(23rem, 28vw); aspect-ratio: 63 / 88; display: flex; align-items: center; justify-content: center; padding: 2.4em 2em;
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(22, 23, 27, 0.08), 0 18px 50px rgba(22, 23, 27, 0.12); }