/* A4 — preview. CSS-drawn thumbnails: no images, page weight is a conversion lever. */
.pages{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:1rem;margin:0}
@media(min-width:420px){.pages{grid-template-columns:repeat(3,1fr)}}
.pg{border:2px solid var(--ink);background:var(--white);display:flex;flex-direction:column}
.pg .thumb{height:96px;background:
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 14px/80% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 30px/70% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 46px/76% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 62px/60% 12px no-repeat content-box,
  var(--white)}
.pg--v2 .thumb{background:
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 14px/64% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 30px/78% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 46px/70% 12px no-repeat content-box,
  var(--white)}
.pg--v3 .thumb{background:
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 22px/76% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 38px/56% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 54px/72% 12px no-repeat content-box,
  var(--white)}
.pg--colour .thumb{background:
  linear-gradient(var(--lime) 26px,transparent 26px) 12px 12px/76% 30px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 52px/70% 12px no-repeat content-box,
  linear-gradient(var(--ink-12) 2px,transparent 2px) 12px 68px/62% 12px no-repeat content-box,
  var(--white)}
.pg--photo .thumb{background:
  linear-gradient(135deg,var(--lime-tint) 0 55%,var(--lime) 55% 78%,var(--lime-deep) 78% 100%) 10px 10px/calc(100% - 20px) 76px no-repeat,
  var(--white)}
.pg .pfoot{border-top:1.5px solid var(--ink-12);padding:.35rem .45rem;display:flex;justify-content:space-between;align-items:center;gap:.3rem}
.pg .pno{font-size:.55rem;color:var(--ink-60)}
.pv-escape{font-size:.78rem;color:var(--ink-60);padding:0 1rem;margin:0 0 1rem;max-width:40ch}

/* page-count tally — desktop side rail only; mobile has the dock line */
.pv-tally{display:none}

/* Desktop: pages left, the decision parked on the right (flow--split). */
@media(min-width:700px){ .pages{grid-template-columns:repeat(4,1fr)} }
@media(min-width:900px){
  .pages{grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem 0 0}
  .pg .thumb{height:150px}
  .pg{transition:transform var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
  .pg:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
  .pv-escape{padding:1rem 0 0;max-width:none}

  .pv-tally{display:block;margin-top:1.6rem;border:2px solid var(--ink);background:var(--white);
    font-size:.74rem}
  .pv-tally .row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1rem;
    border-bottom:1.5px solid var(--ink-12)}
  .pv-tally .row:first-child{background:var(--lime-tint);font-weight:700}
  .pv-tally .row:last-child{border-bottom:none}
  .pv-tally .row span:last-child{font-weight:700}
}
@media(min-width:1200px){ .pages{grid-template-columns:repeat(5,1fr)} }