/* 00 · the roll (sections/roll.js): the receipt keeps counting after the footer, pinned in the window, one more per row. */
.part--roll .part__copy { padding-top: 1.25rem; padding-bottom: 0; }
.roll__track { position: relative; }
.roll__space { height: var(--roll-h, 400svh); }
.part--roll .part__copy::after { display: none; }
.part--roll .part__copy::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; border-top: 3px dashed var(--ink); }
.roll__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* a remark in the margin: a small card, one at a time, a stamp in its corner; held in from the edge, so the tilt and the
   stamp stay inside the window, which clips */
.roll__remark { position: absolute; z-index: 2; right: 1rem; bottom: 6.5rem; width: min(18rem, 78%); margin: 0; padding: 1rem 1.1rem 1.05rem; background: var(--paper); box-shadow: 0 0 0 1px var(--ink), 0 24px 40px -30px rgba(16, 17, 15, 0.55); rotate: -1.5deg; font: 800 1.05rem / 1.28 var(--serif); letter-spacing: -0.006em; opacity: 0; translate: 0 10px; transition: opacity 0.35s ease, translate 0.5s var(--settle); pointer-events: none; }
.roll__remark.is-on { opacity: 1; translate: 0 0; }
.roll__remark p { margin: 0; padding-right: 1.5rem; }
.roll__remark-stamp { position: absolute; right: -0.5rem; top: -0.7rem; font-size: 0.8rem; --tilt: 8deg; transform: rotate(var(--tilt)); background: var(--paper); }
html[data-lights="off"] .roll__remark, html[data-night="on"] .roll__remark { box-shadow: 0 0 0 1px var(--ink); }
.roll__pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5rem; background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; }
.roll__win { padding-top: 2.6rem; will-change: transform; }
.roll__row { position: relative; display: flex; align-items: baseline; gap: 0.7rem; height: 2.4rem; padding: 0.55rem 0; box-sizing: border-box; font: 400 1rem/1.3 var(--sans); white-space: nowrap; }
.roll__row > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.roll__row i { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--gray-line); transform: translateY(-0.28em); }
.roll__row b { font: 800 1.05rem/1 var(--serif); letter-spacing: 0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.roll__row--aside > span { font-style: italic; color: var(--gray-text); }
.roll__stamp { position: absolute; right: -0.3rem; bottom: -0.6rem; font-size: 1.25rem; opacity: 0; mix-blend-mode: multiply; }
.roll__stamp:empty { display: none; }
.roll__row--round .roll__stamp { right: 5.5rem; top: 50%; bottom: auto; translate: 0 -50%; font-size: 1rem; opacity: 1; }
html[data-lights="off"] .roll__stamp { mix-blend-mode: normal; }
/* the last row: the quadrillion, marked like the ladder's top step; the fade at the foot of the window goes */
.roll__pin.is-ended::after { opacity: 0; transition: opacity 0.4s; }
.roll__row--end { margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem; background: linear-gradient(transparent 18%, var(--canton) 18%, var(--canton) 86%, transparent 86%); }
.roll__row--end > span { font: 800 1.05rem/1.3 var(--serif); letter-spacing: -0.004em; }
.roll__row--end b { font-size: 1.2rem; }
.roll__row--end i { border-bottom-color: color-mix(in srgb, var(--ink) 40%, transparent); }
/* the last stamp of the roll, big, under the quadrillion */
.roll__final { position: absolute; left: 50%; top: 60%; z-index: 2; margin: 0; font-size: clamp(2.2rem, 5vw, 3.3rem); border-width: 0.1em; padding: 0.14em 0.45em; background: var(--paper); mix-blend-mode: multiply; --tilt: -7deg; opacity: 0; transform: translate(-50%, 0) rotate(var(--tilt)) scale(2.2); pointer-events: none; }
.roll__final.is-down, .roll__rank.is-down { animation: roll-stamp 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
@keyframes roll-stamp { 0% { opacity: 0; transform: var(--at, translate(-50%, 0)) rotate(var(--tilt)) scale(2.2); } 55% { opacity: 1; transform: var(--at, translate(-50%, 0)) rotate(var(--tilt)) scale(0.96); } 100% { opacity: 1; transform: var(--at, translate(-50%, 0)) rotate(var(--tilt)) scale(1); } }
html[data-lights="off"] .roll__final, html[data-lights="off"] .roll__rank { mix-blend-mode: normal; background: var(--paper); }

/* the closing sheet: straight after the roll lets go */
.roll__after { position: relative; padding: 0 0 clamp(3.5rem, 9vh, 7rem); }
.roll__after[hidden] { display: none; }
.roll__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.1rem; }
.roll__sub b { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.roll__close { position: relative; padding-top: clamp(3rem, 7vh, 4.5rem); }
.part--roll .roll__title { font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 0.92; letter-spacing: -0.012em; margin: 0 0 1.4rem; text-wrap: balance; }
.roll__close .q-lede { margin-bottom: 1.1rem; max-width: 26rem; }
.roll__close .q-body { max-width: 30rem; }
/* a big stamp on the paper, under the message: the visitor's rank, with their number */
.roll__seal { display: flex; justify-content: flex-end; margin: clamp(2.4rem, 5vh, 3.4rem) 0.6rem 0 0; }
.roll__rank { position: relative; flex-direction: column; gap: 0.35rem; font-size: clamp(2.1rem, 4vw, 3rem); border-width: 0.1em; padding: 0.2em 0.55em 0.3em; background: var(--paper); mix-blend-mode: multiply; --tilt: -6deg; --at: translate(0, 0); opacity: 0; transform: rotate(var(--tilt)) scale(2.2); pointer-events: none; }
.roll__rank small { font: 600 0.28em/1 var(--sans); letter-spacing: 0.08em; }
.roll__acts { position: relative; margin-top: clamp(1.9rem, 3.4vh, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.roll__telegram span { margin-left: 0.5em; }
.roll__soon { display: inline-flex; align-items: center; padding: 0.45em 0.7em 0.4em; box-shadow: inset 0 0 0 1.5px var(--ink); font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; rotate: -3deg; }
.roll__fine { margin-top: 1.2rem; max-width: 26rem; }
.roll__after .tear { margin-top: clamp(3rem, 7vh, 4.5rem); }
.roll__left { margin: 1.6rem 0 0.5rem; text-align: center; color: var(--gray-text); font-size: var(--small); }
@media (max-width: 880px) {
  .roll__seal { justify-content: center; margin-right: 0; }
  .roll__final { font-size: 2rem; }
  .roll__row--end > span { flex: none; font-size: 0.92rem; }
  .roll__row--end i { min-width: 0.4rem; }
  .roll__row--end b { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .roll__final.is-down, .roll__rank.is-down { animation: none; opacity: 1; transform: var(--at, translate(-50%, 0)) rotate(var(--tilt)); } }
.roll__art { height: 100%; display: flex; align-items: center; justify-content: center; }
.roll__art img { max-height: 100%; width: auto; max-width: 100%; }
.part--roll .stage__caption { display: none; }
@media (max-width: 880px) {
  .roll__row { font-size: 0.9rem; }
}