/* P. 05 No page limit: a scroll-linked precision machine. A sticky stage inside a tall track; scrolling reads a
   500-page stack one page at a time (red scan line, page leaves the stack), the counter rolls, the output grows in order. */
.pages-head { margin-bottom: clamp(8px, 2vw, 24px); }
.pages { position: relative; height: 250vh; }
.pages__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.pages__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pages__grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(24px, 3.4vw, 56px); align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }

/* meter (left) */
.pages-meter { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.pages-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pages-meter__label { font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.pages-meter__status { display: inline-flex; align-items: center; gap: 8px; font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.pages-meter__status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--red-lift); box-shadow: 0 0 10px rgba(226, 85, 60, 0.8); }
.pages-meter__status.is-done { color: var(--green-lift); }
.pages-meter__status.is-done i { background: var(--green-lift); box-shadow: 0 0 10px rgba(70, 199, 156, 0.8); }
.pages-meter__row { display: flex; align-items: flex-end; gap: 14px; margin-top: 18px; }
.pages-meter__num { display: flex; font: 600 clamp(4.5rem, 2rem + 6.6vw, 10rem)/1 var(--f-disp); letter-spacing: 0; color: var(--fg); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; }
.pages-dig { position: relative; display: block; height: 1em; overflow: hidden; width: 0.63em; margin-right: -0.01em; }
.pages-dig__strip { display: block; line-height: 1; text-align: center; transform: translate3d(0, 0, 0); will-change: transform; }
.pages-dig.is-dim { color: rgba(243, 242, 239, 0.18); transition: color 0.4s; }
.pages-meter__of { padding-bottom: 0.7em; font: 500 clamp(1rem, 0.9rem + 0.5vw, 1.35rem)/1 var(--f-mono); color: var(--fg-3); white-space: nowrap; }
.pages-meter__of b { font-weight: 500; color: var(--fg-2); }
.pages-meter__doc { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 20px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.8125rem/1.2 var(--f-mono); color: var(--fg-2); }
.pages-meter__doc i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc, var(--gold)); box-shadow: 0 0 8px var(--tc, var(--gold)); flex: none; }
.pages-meter__type { flex: none; color: var(--tc, var(--gold)); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.pages-meter__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.pages-ruler { margin-top: 28px; }
.pages-ruler__track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 10%) 0 100% / 100% 10px no-repeat, repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 2%) 0 100% / 100% 5px no-repeat; border-bottom: 1px solid var(--line-2); }
.pages-ruler__fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, rgba(226, 85, 60, 0.4), var(--red-lift)); transform-origin: left; transform: scaleX(0); will-change: transform; box-shadow: 0 0 12px rgba(226, 85, 60, 0.6); }
.pages-ruler__knob { position: absolute; left: 0; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--red-lift), 0 0 14px rgba(226, 85, 60, 0.6); transform: translate3d(0, 0, 0); will-change: transform; }
.pages-ruler__ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 500 0.75rem/1.35 var(--f-mono); color: var(--fg-3); }
.pages-ruler__ends span:last-child { text-align: right; }
.pages-ruler__ends b { display: block; font: 600 0.8125rem/1.2 var(--f-mono); color: var(--fg); letter-spacing: 0.02em; }

/* bed (centre): the canvas draws the stack inside this box */
.pages-bed { position: relative; height: 100%; min-height: 0; }

/* output feed (right) */
.pages-feed { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(30, 34, 42, 0.94), rgba(18, 21, 26, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(0, 0, 0, 0.9); overflow: hidden; }
.pages-feed__bar { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.pages-feed__dots { display: flex; gap: 6px; margin-right: 4px; }
.pages-feed__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.pages-feed__order { margin-left: auto; color: var(--fg-3); }
.pages-feed__win { position: relative; height: clamp(300px, 46vh, 460px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); }
.pages-feed__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pages-row { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 3em 6.4em minmax(0, 1fr) 1.2em; align-items: center; gap: 10px; height: 38px; padding: 0 18px; font: 500 0.8125rem/1 var(--f-mono); color: var(--fg-2); border-bottom: 1px solid rgba(255, 255, 255, 0.045); will-change: transform; }
.pages-row__n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pages-row__t { color: var(--tc, var(--gold)); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pages-row__d { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pages-row__s { justify-self: end; color: var(--green-lift); font-size: 0.875rem; }
.pages-row.is-now { background: linear-gradient(90deg, rgba(226, 85, 60, 0.12), rgba(226, 85, 60, 0)); }
.pages-row.is-now .pages-row__n { color: var(--red-lift); }
.pages-row.is-now .pages-row__s { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(226, 85, 60, 0.3); border: 1.5px solid transparent; border-top-color: var(--red-lift); font-size: 0; animation: pages-spin 0.9s linear infinite; }
@keyframes pages-spin { to { transform: rotate(360deg); } }
.pages-row__bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red-lift); transform-origin: left; transform: scaleX(0); opacity: 0; }
.pages-row.is-now .pages-row__bar { opacity: 1; }
.pages-row.is-gap { color: var(--fg-3); }
.pages-row.is-gap .pages-row__d { color: var(--fg-3); }
.pages-feed__foot { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line); font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.pages-feed__foot b { font-weight: 600; color: var(--fg); }

/* tablet: keep three columns but tighten */
@media (max-width: 1180px) {
  .pages-row { grid-template-columns: 2.8em 6em minmax(0, 1fr) 1.1em; gap: 8px; padding: 0 14px; }
  .pages-ruler__ends { font-size: 0.75rem; }
}
/* phone / narrow: meter on top, stack in the middle, feed below */
@media (max-width: 860px) {
  .pages { height: 200vh; }
  .pages__stage { min-height: 600px; }
  .pages__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 14px; padding-top: calc(var(--nav-h) + 26px); padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .pages-meter__top { padding-bottom: 10px; }
  .pages-meter__row { margin-top: 8px; gap: 10px; }
  .pages-meter__num { font-size: clamp(3.4rem, 15vw, 5.6rem); }
  .pages-meter__of { padding-bottom: 0.55em; }
  .pages-meter__doc { margin-top: 8px; padding: 9px 12px; }
  .pages-ruler { display: none; }
  .pages-feed { border-radius: var(--r-md); }
  .pages-feed__bar { height: 38px; padding: 0 14px; }
  .pages-feed__win { height: 152px; }
  .pages-feed__foot { display: none; }
  .pages-row { height: 34px; grid-template-columns: 2.6em 5.6em minmax(0, 1fr) 1.1em; gap: 8px; padding: 0 14px; font-size: 0.75rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .pages-feed__win { height: 116px; }
}

/* reduced motion: a complete still layout, no sticky */
.pages.is-static { height: auto; }
.pages.is-static .pages__stage { position: relative; height: auto; min-height: 0; }
.pages.is-static .pages__grid { padding-top: 24px; padding-bottom: 24px; }
.pages.is-static .pages-bed { height: clamp(380px, 52vh, 560px); }
@media (max-width: 860px) { .pages.is-static .pages-bed { height: 340px; } }
.pages.is-static .pages-feed__win { height: calc(7 * 38px); -webkit-mask-image: none; mask-image: none; }
@media (max-width: 860px) { .pages.is-static .pages-feed__win { height: calc(7 * 34px); } }