/* static/css/pages/archivo.css
   Page layout for the Archivo view only. The row, pager and VERIFY sizes are
   shared components (components.css). Numbers are artboard 3 design px; the
   content region starts at y=121.8 and ends at y=951.8. */
.arch {
  display: grid;                           /* list to 1310.4 | bar 1349.7–1373.5 | rail */
  grid-template-columns: calc(1254.7 * var(--u)) calc(39.3 * var(--u)) calc(23.8 * var(--u)) 1fr;
  height: 100%;
}

/* ---- Left column: hero, meta bar, scrolling list ------------------------ */
.arch__main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}
.arch__hero {                              /* rule top y=428 */
  position: relative;
  height: calc(306.2 * var(--u));
  padding-top: calc(44.2 * var(--u));
}
.arch__lede {                              /* baselines 284.0 / 311.9, 366.1 / 394.0 */
  margin: calc(26 * var(--u)) 0 0 calc(-0.9 * var(--u));
  font-size: var(--fs-standfirst);
  line-height: calc(27.9 * var(--u));
  letter-spacing: -.068em;
}
.arch__lede + .arch__lede { margin-top: calc(26.3 * var(--u)); }
.arch__mark {                              /* box strokes 908.4–1189.4 x 170.5–389 */
  position: absolute;
  left: calc(848.7 * var(--u));
  top: calc(44.7 * var(--u));
  width: calc(289.02 * var(--u));
  height: auto;
}

.arch__meta {                              /* rule 53.7–1298.1 at y=429; dividers 474.5 / 914.5 */
  display: grid;
  grid-template-columns: calc(419.8 * var(--u)) calc(440 * var(--u)) 1fr;
  width: calc(1244.4 * var(--u));
  margin-left: calc(-2 * var(--u));
  padding-top: calc(17.3 * var(--u));
  border-top: var(--rule-strong) solid var(--ink);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: -.019em;
}
.arch__meta p {                            /* baseline 464.6, dividers y 447.3–469.4 */
  height: calc(22.1 * var(--u));
  margin: 0;
  padding-top: calc(2.85 * var(--u));      /* +1.2: small caps render high */
  line-height: calc(20 * var(--u));
  white-space: nowrap;
}
.arch__meta p:nth-child(1) { padding-left: calc(7.6 * var(--u)); }
.arch__meta p:nth-child(2) { padding-left: calc(107.7 * var(--u)); border-left: var(--rule-strong) solid var(--ink); }
.arch__meta p:nth-child(3) { padding-right: calc(3.9 * var(--u)); border-left: var(--rule-strong) solid var(--ink); text-align: right; }

/* The only scrolling region on the page (spec §4). Rows start at y=489.1,
   and the visible window ends at y=941.5 with the bar, so the next row's top
   edge never peeks out above the footer rule. */
.arch__list {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--u));
  width: calc(1257.7 * var(--u));
  min-height: 0;
  margin: calc(19.7 * var(--u)) 0 calc(10.3 * var(--u)) calc(-3 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;                   /* no-JS fallback */
  scrollbar-color: var(--ink) var(--ground);
}
.arch--js .arch__list { scrollbar-width: none; }
.arch--js .arch__list::-webkit-scrollbar { display: none; }

/* ---- The capsule scrollbar (1349.7–1373.5 x 166.1–941.5) ---------------- */
.arch__bar {
  position: relative;
  grid-column: 3;
  margin: calc(44.3 * var(--u)) 0 calc(10.3 * var(--u));
  border: var(--rule) solid var(--ink);
  border-radius: calc(11.9 * var(--u));
  visibility: hidden;                      /* shown once the script drives it */
  touch-action: none;
}
.arch--js .arch__bar { visibility: visible; }
.arch--js .arch__bar[data-idle] .arch__thumb { display: none; }
.arch__thumb {                             /* 1350.2–1373 x 92.4 */
  position: absolute;
  left: calc(0.5 * var(--u) - var(--rule));  /* 0.5 in from the outer edge */
  right: calc(0.5 * var(--u) - var(--rule));
  top: 0;
  height: calc(92.4 * var(--u));
  border-radius: calc(11.4 * var(--u));
  background: var(--ink);
  transform: translateY(var(--thumb-y, calc(20 * var(--u))));
  cursor: grab;
}
.arch__chev {                              /* 1356.6–1366.6, 5.7 in from each end */
  position: absolute;
  left: calc(50% - 5 * var(--u));
  width: calc(10 * var(--u));
  height: calc(8.4 * var(--u));
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  overflow: visible;
  cursor: pointer;
}
.arch__chev path { vector-effect: non-scaling-stroke; }
.arch__chev--up { top: calc(3.9 * var(--u)); }
.arch__chev--down { bottom: calc(3.4 * var(--u)); }

/* ---- Right rail --------------------------------------------------------- */
.arch__rail {
  position: relative;
  display: flex;                           /* the pager sits at the foot of the rail */
  flex-direction: column;
  grid-column: 4;
  min-height: 0;
  /* The NEXT arrow and the corner + overhang the content edge (x=1864.3)
     by up to 5.4px; the padding keeps them inside the scrollport. */
  margin-right: calc(-6 * var(--u));
  padding: calc(62.1 * var(--u)) calc(6 * var(--u)) 0 calc(30 * var(--u));
  overflow-y: auto;                        /* only on very short, wide viewports */
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--ground);
}
.arch__about h2 {                          /* baseline 302.7 */
  margin: 0 0 0 calc(-0.6 * var(--u));
  font-size: var(--fs-rail-head);
  font-weight: var(--fw-medium);
  line-height: calc(22 * var(--u));
}
.arch__about h2::after {                   /* 1403.5–1444.3 at y=324.4 */
  content: "";
  display: block;
  width: calc(40.8 * var(--u));
  height: var(--rule-strong);
  margin: calc(14.7 * var(--u)) 0 0 calc(0.6 * var(--u));
  background: var(--ink);
}
.arch__about p {                           /* baselines 372.1 / 401.1 / 430.2 */
  margin-top: calc(27.55 * var(--u));
  margin-left: calc(-0.6 * var(--u));
  font-size: var(--fs-meta);
  line-height: calc(29 * var(--u));
  letter-spacing: -.039em;
}
.arch__pub {                               /* baseline 510.6 */
  margin: calc(52.5 * var(--u)) 0 0 calc(-0.6 * var(--u));
  font-size: var(--fs-rail-pub);
  font-weight: var(--fw-medium);
  line-height: calc(24 * var(--u));
}
.arch__edition {                           /* baseline 545.8, x 1404.8 */
  margin: calc(11.4 * var(--u)) 0 0 calc(1.3 * var(--u));
  font-size: var(--fs-rail-edition);
  font-weight: var(--fw-medium);
  line-height: calc(24 * var(--u));
}
.arch__dashes {                            /* 1402.8–1572.5 at y=616.3: square-capped 4/4 dashes read 6 on / 2 off */
  width: calc(169.7 * var(--u));
  height: var(--rule-strong);
  margin: calc(63.75 * var(--u)) 0 0 calc(-0.7 * var(--u));
  border: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) left / calc(3.95 * var(--u)) 100% no-repeat,
    repeating-linear-gradient(to right,
      transparent 0 calc(2 * var(--u)), var(--ink) calc(2 * var(--u)) calc(8 * var(--u)))
      calc(3.95 * var(--u)) 0 / calc(165.75 * var(--u)) 100% no-repeat;
}
.arch__ho {                                /* strokes 1403.8–1690.1 x 680.5–748.2 */
  display: block;
  width: calc(297.9 * var(--u));
  height: auto;
  margin: calc(57.35 * var(--u)) 0 0 calc(-5.55 * var(--u));
}
.arch__name {                              /* cap H at 1406.4, baseline 820.8 */
  display: block;
  width: calc(399.4 * var(--u));
  height: auto;
  margin: calc(29.5 * var(--u)) 0 0 calc(-1.3 * var(--u));
}
.arch__tag {                               /* baselines 851.2 / 875.2, x 1404.8 */
  max-width: calc(352 * var(--u));
  margin: calc(-1.75 * var(--u)) 0 0 calc(1.3 * var(--u));
  font-size: var(--fs-tagline);
  line-height: calc(24 * var(--u));
  letter-spacing: -.0387em;
}
/* The pager closes the rail, its rule on top, clear of the corner + below. */
.arch__rail .pager {
  flex: none;
  margin: auto calc(-0.4 * var(--u)) calc(46 * var(--u)) 0;   /* rule ends x=1864.7 */
  padding: calc(27.6 * var(--u)) 0 0;
  border-bottom: 0;
  border-top: var(--rule-strong) solid var(--ink);
}
.arch__rail > .xh--br {                    /* centre (1860.2, 928.5) */
  --xh-size: calc(19 * var(--u));
  right: calc(0.6 * var(--u));            /* padding edge x=1870.3 */
  bottom: calc(13.8 * var(--u));
}