/* ==========================================================================
   devanshi jain — presentations (the bars and the scrolling frame are in page.css)
   From the owner's reference (an archive spread): the plates rise in a staircase from left to right in
   two flights of five columns (one plate or a stacked pair each), every plate the same width, each with
   only its venue's number centred above it. The venues are indexed along the bottom in narrow rotated
   columns (number, city, place), the loose words at their left. No footer: the page is one spread;
   its text opens from the title. One text size (--text); numbers [02] lighter, at .88em to match
   the lowercase optically. On phones the staircase runs downward and the index is a plain list.
   ========================================================================== */

p, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }

.presentations-page {
  --frame-bottom: calc(var(--edge-y) + var(--safe-b));   /* no footer on this page */
  --cols: 5;                                               /* columns in a flight */
  --gap: clamp(20px, 2.6vw, 44px);
  --rise: clamp(24px, 5.5vh, 60px);                        /* each column stands this much higher */
}
.presentations-page .page-frame { padding: var(--fade) var(--right) var(--fade) var(--side); overflow-x: hidden; }

/* ---------- the staircase ---------- */
.pv-stair {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  align-items: end; padding-top: calc(var(--rise) * 2);
}
.pv-step { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 18px); }
.pv-step--2 { margin-bottom: calc(var(--rise) * 1); }  .pv-step--3 { margin-bottom: calc(var(--rise) * 2); }
.pv-step--4 { margin-bottom: calc(var(--rise) * 3); }  .pv-step--5 { margin-bottom: calc(var(--rise) * 4); }
.pv-step--6 { margin-bottom: calc(var(--rise) * 5); }  .pv-step--7 { margin-bottom: calc(var(--rise) * 6); }
/* the second flight follows close under the first, a little in, as the next run of a stair */
.pv-stair + .pv-stair { margin-top: clamp(20px, 3.5vh, 40px); padding-left: calc((100% - 4 * var(--gap)) / 10); }
.pv-plate { text-align: center; }
.pv-plate img { display: block; width: 100%; height: auto; background: #efefee; }
.pv-mark { display: block; font-size: .88em; line-height: 1.5; margin-bottom: .3em; color: var(--ink-soft); opacity: .7; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ---------- the index along the bottom ---------- */
.pv-index {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap);
  align-items: end; margin-top: clamp(64px, 12vh, 140px);
}
.pv-labels { color: #9a9c9b; line-height: 1.55; max-width: 16em; }

/* ---------- the text, opened by the title (as lab + materials' panel) ---------- */
.pv-pop {
  position: fixed; z-index: 4; right: var(--right); top: var(--frame-top); width: min(340px, 30vw);
  padding: 4px 0 0 clamp(20px, 2.2vw, 36px); border-left: 1px solid #dcdcda; background: var(--paper);
  color: var(--ink); line-height: 1.55; animation: pv-in .35s ease both;
}
.pv-pop[hidden] { display: none; }
.pv-pop p + p { margin-top: .9em; }
.pv-pop__close { position: absolute; right: 0; top: -2px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.pv-pop__close::after { content: ""; position: absolute; inset: -11px; }
.pv-pop__close svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.pv-pop p:first-of-type { padding-right: 32px; }
@keyframes pv-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pv-pop { animation: none; } }
.pv-venues { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(6px, .8vw, 14px); align-items: end; }   /* one column per entry, however many */
/* each venue reads upward, like the reference's rotated captions: the number at the foot */
.pv-venue { display: flex; flex-direction: column; align-items: flex-start; }
.pv-venue__text {
  writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1.5;
  display: flex; flex-direction: column; gap: 0;
}
.pv-venue__text span:first-child { color: var(--ink); }
.pv-venue__text span:last-child { color: var(--ink-soft); }
.pv-venue__num { order: 2; min-height: 1.5em; margin-top: .7em; font-size: .88em; color: var(--ink-soft); opacity: .7; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ---------- tablets: fewer, larger steps ---------- */
@media (max-width: 1100px) {
  .pv-index { grid-template-columns: 1fr; row-gap: 48px; }
}

/* ---------- phones: the staircase runs downward; the index is a plain list ---------- */
@media (max-width: 719px) {
  .pv-stair { display: block; padding-top: 0; }
  .pv-step { margin-bottom: 0 !important; display: block; }
  .pv-plate { width: 52%; margin-bottom: 26px; }
  /* each plate a step further right, starting again every five */
  .pv-step:nth-child(5n+1) .pv-plate { margin-left: 0; }
  .pv-step:nth-child(5n+2) .pv-plate { margin-left: 12%; }
  .pv-step:nth-child(5n+3) .pv-plate { margin-left: 24%; }
  .pv-step:nth-child(5n+4) .pv-plate { margin-left: 36%; }
  .pv-step:nth-child(5n) .pv-plate { margin-left: 48%; }
  .pv-stair + .pv-stair { margin-top: 0; padding-left: 0; }
  /* numbers sit at the photo's top-left corner on phones */
  .pv-plate { text-align: left; }
  .pv-index { margin-top: 48px; row-gap: 40px; }
  .pv-pop { left: var(--side); right: var(--right); width: auto; padding: 16px 0 0; border-left: 0; border-top: 1px solid #dcdcda; }
  .pv-venues { grid-auto-flow: row; grid-template-columns: 1fr; row-gap: 14px; }
  .pv-venue { flex-direction: row; align-items: baseline; gap: .8em; }
  .pv-venue__text { writing-mode: horizontal-tb; transform: none; flex-direction: column; }
  .pv-venue__num { order: 0; margin-top: 0; flex: none; width: 2.6em; }
}