/* which collection, on its own label at the top right: a button that opens the index */
.collection {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px 9px 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  border-radius: 1px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.collection[hidden] { display: none; }
.collection:hover { background: var(--paper); }
.collection-kicker {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
.collection-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collection-name::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 3px 10px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(-45deg);
  opacity: 0.6;
}
.collection:hover .collection-name::after { opacity: 1; }

/* the index: every collection on the wall, by group, as squared labels; it
   fits one screen on a desktop, its sizes following the screen's height */
.index {
  --row: clamp(6px, 1.1vh, 14px);
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: none;
  background: rgba(248, 247, 244, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0 clamp(24px, 5vw, 80px) clamp(16px, 3vh, 36px);
}
.index[hidden] { display: none; }
.index-head {
  flex: none;
  display: flex;
  align-items: baseline;
  padding: clamp(18px, 3vh, 30px) 0 0;
}
.index-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 3vh, 28px);
  letter-spacing: 0.02em;
}
.index-close {
  position: absolute;
  right: 16px;
  top: clamp(14px, 2.6vh, 24px);
  color: var(--muted);
}
.index-close:hover { color: var(--ink); background: transparent; }
.index-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
}
/* a group is one row: its name on the left, its collections packed to the right, as many to a line as fit */
.index-group {
  display: grid;
  grid-template-columns: minmax(150px, 0.14fr) 1fr;
  gap: 0 24px;
  align-items: start;
  padding: var(--row) 0;
  text-align: left;
}
.index-group + .index-group { border-top: 1px solid var(--rule); }
.index-group-name {
  font-weight: 400;
  margin: 0;
  padding-top: clamp(8px, 1.2vh, 13px);
  font: clamp(10px, 1.3vh, 11.5px)/1.6 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 0.9vh, 8px) clamp(5px, 0.5vw, 8px);
}
.index-entry {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: clamp(6px, 1vh, 10px) clamp(12px, 1vw, 16px);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.index-entry:hover { border-color: var(--ink); }
.index-entry:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.index-entry[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.index-entry[aria-current="page"] .index-count { color: rgba(255, 255, 255, 0.7); }
.index-name {
  font-family: var(--serif);
  font-size: clamp(15px, 2vh, 19px);
  line-height: 1.25;
  white-space: nowrap;
}
.index-count {
  font-size: clamp(10px, 1.3vh, 11.5px);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* a group's name that is a collection itself: a link, underlined when it is the one open */
.index-whole {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.index-whole:hover { border-bottom-color: var(--ink); }
.index-whole[aria-current="page"] { border-bottom-color: var(--ink); }
.index-whole .index-count { letter-spacing: 0.02em; text-transform: none; }
body.index-open .hud, body.index-open .collection, body.index-open .show-ui { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .collection { left: auto; max-width: calc(100% - 32px); padding: 10px 14px 10px 16px; }
  .collection-kicker { display: none; }
  .collection-name { font-size: 16px; max-width: 200px; }
  /* a phone: one column, each collection a full-width row big enough for a thumb */
  .index { padding: 0 20px max(32px, env(safe-area-inset-bottom)); display: block; }
  .index-head { padding: 26px 0 12px; }
  .index-title { font-size: 22px; }
  .index-close { right: 4px; top: 18px; padding: 10px; }
  .index-group { grid-template-columns: 1fr; gap: 10px 0; padding: 18px 0 16px; }
  .index-group-name { padding-top: 0; }
  .index-group-name { margin-bottom: 12px; font-size: 11.5px; }
  .index-body { justify-content: flex-start; }
  .index-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .index-entry { display: flex; width: 100%; justify-content: space-between; padding: 14px 18px 14px 20px; border-radius: 2px; }
  .index-name { font-size: 21px; white-space: normal; }
  .index-count { font-size: 12px; }
}

/* desktop: the index fills the screen. Every row stretches to share the height,
   every button stretches to share its row, the type scales with the screen */
@media (min-width: 761px) {
  .index-body { justify-content: stretch; max-width: none; padding-bottom: 0; }
  .index-group { flex: 1 1 0; display: grid; grid-template-columns: minmax(170px, 0.13fr) 1fr; align-items: stretch; padding: 0.5vh 0; }
  .index-group-name { display: flex; align-items: center; padding-top: 0; font-size: clamp(11px, 1.05vw, 16px); }
  .index-list { align-content: stretch; height: 100%; gap: 0.6vh 0.5vw; }
  .index-list li { display: flex; flex: 1 1 auto; }
  .index-entry { flex: 1; justify-content: center; align-items: center; padding: 0.6vh 1.2vw; }
  .index-name { font-size: max(16px, calc(var(--fit, 1) * min(3.6vw, 6vh))); line-height: 1; letter-spacing: -0.01em; }
  .index-count { font-size: clamp(11px, 1vw, 17px); }
  .index-whole span:first-child { font-size: clamp(11px, 1.15vw, 15px); }
}

/* desktop, freer: no rows by group. Every collection (the periods' wholes among
   them) is one button in a single flow that fills the screen, lines sharing the
   height, buttons their line */
@media (min-width: 761px) {
  .index-body { display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; justify-content: stretch; gap: 0.7vh 0.5vw; }
  .index-group, .index-list, .index-list li { display: contents; }
  .index-group + .index-group { border: 0; }
  .index-group-name:not(:has(.index-whole)) { display: none; }
  .index-group-name { display: flex; flex: 1 1 auto; margin: 0; padding: 0; font: inherit; letter-spacing: 0; text-transform: none; }
  .index-whole, .index-entry {
    flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 10px;
    padding: 0.6vh 1.2vw; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); text-decoration: none;
  }
  .index-whole span:first-child { font-family: var(--serif); font-size: max(16px, calc(var(--fit, 1) * min(3.6vw, 6vh))); line-height: 1; letter-spacing: -0.01em; text-transform: none; }
  .index-whole:hover, .index-entry:hover { border-color: var(--ink); }
  .index-whole[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .index-entry, .index-whole { flex-grow: 1; }
}

/* desktop: edge to edge, hardly a gap, the type as large as the flow allows */
@media (min-width: 761px) {
  .index { padding: 0 10px 10px; }
  .index-head { padding: 14px 6px 8px; }
  .index-close { top: 8px; right: 8px; }
  .index-body { gap: 6px; }
  .index-whole, .index-entry { padding: 0.4vh 0.9vw; }
}

/* the puzzle: each name at its own size (--w, by how many works), the flow fitting them together */
@media (min-width: 761px) {
  .index-entry .index-name, .index-whole span:first-child { font-size: max(14px, calc(var(--fit, 1) * var(--w, 1) * min(3.2vw, 5.4vh))); }
}

/* each button exactly as big as its name: the size is set on the button, its
   padding and its count follow it; the flow packs them and centres each line */
@media (min-width: 761px) {
  .index-body { justify-content: center; align-content: space-evenly; gap: 0.35vw; }
  .index-whole, .index-entry {
    flex: 0 0 auto; font-size: max(14px, calc(var(--fit, 1) * var(--w, 1) * min(3.2vw, 5.4vh)));
    padding: 0.08em 0.32em 0.12em; gap: 0.18em; align-items: baseline;
  }
  .index-entry .index-name, .index-whole span:first-child { font-size: 1em; }
  .index-whole .index-count, .index-entry .index-count { font-size: max(10px, 0.24em); }
}
@media (min-width: 761px) {
  .index-entry .index-name, .index-whole span:first-child { text-transform: uppercase; letter-spacing: 0; line-height: 0.95; }
}
@media (min-width: 761px) { .index-group-name { flex: 0 0 auto; } }
/* the poster: sizes come from collections.js (fit), lines run edge to edge */
@media (min-width: 761px) {
  .index-body { justify-content: flex-start; align-content: flex-start; }
  .index-whole, .index-entry { flex: 0 0 auto; white-space: nowrap; }
}
.index-break { display: none; }
@media (min-width: 761px) { .index-break { display: block; flex-basis: 100%; height: 0; } }
@media (min-width: 761px) { .index-group-name:has(.index-whole) { display: contents; } }
@media (min-width: 761px) { .index-break { margin-top: var(--line-gap, 8px); } }
.page-veil { position: fixed; inset: 0; z-index: 30; background: var(--wall); opacity: 0; pointer-events: none; }

/* the collection label: once the zoom is under way it draws in to its name alone */
.collection { top: 12px; right: 12px; padding: 7px 12px 7px 14px; transition: padding 0.6s ease, gap 0.6s ease; }
.collection-name { font-size: 16px; transition: font-size 0.6s ease; }
.collection-kicker { transition: opacity 0.6s ease, max-width 0.6s ease; max-width: 120px; overflow: hidden; white-space: nowrap; }
body.zooming .collection { padding: 5px 10px 5px 11px; gap: 0; }
body.zooming .collection-kicker { opacity: 0; max-width: 0; }
body.zooming .collection-name { font-size: 13px; }

/* once the zoom is under way the label folds into a small icon (the index's
   squares); pointing at it unfolds the name again */
.collection-icon { display: inline-flex; line-height: 0; max-width: 0; opacity: 0; overflow: hidden; transition: max-width 0.6s ease, opacity 0.6s ease; }
.collection-name { max-width: 260px; transition: max-width 0.6s ease, opacity 0.5s ease, font-size 0.6s ease; }
body.zooming .collection { padding: 7px; gap: 0; }
body.zooming .collection-name { max-width: 0; opacity: 0; }
body.zooming .collection-icon { max-width: 24px; opacity: 1; }
body.zooming .collection:hover, body.zooming .collection:focus-visible { padding: 7px 12px 7px 14px; gap: 8px; }
body.zooming .collection:hover .collection-name, body.zooming .collection:focus-visible .collection-name { max-width: 260px; opacity: 1; font-size: 15px; }
body.zooming .collection:hover .collection-icon, body.zooming .collection:focus-visible .collection-icon { max-width: 0; opacity: 0; }
/* folded: a perfect square around the icon */


/* the label and the square are one box: its width and height glide between them */
.collection {
  box-sizing: border-box; width: var(--open-w, auto); height: var(--open-h, auto); overflow: hidden; white-space: nowrap;
  justify-content: flex-end; align-items: center;
  transition: width 0.7s cubic-bezier(0.3, 0.6, 0.1, 1), height 0.7s cubic-bezier(0.3, 0.6, 0.1, 1), padding 0.7s cubic-bezier(0.3, 0.6, 0.1, 1), gap 0.7s ease, background 0.2s ease;
}
.collection-kicker, .collection-name, .collection-icon { transition: max-width 0.7s cubic-bezier(0.3, 0.6, 0.1, 1), opacity 0.5s ease; }
body.zooming .collection:not(:hover):not(:focus-visible) { width: 32px; height: 32px; padding: 0 7px; gap: 0; }
body.zooming .collection:not(:hover):not(:focus-visible) .collection-kicker { max-width: 0; opacity: 0; }
/* unfolded again while zooming: the whole label, so it fills its box */
body.zooming .collection:hover .collection-kicker, body.zooming .collection:focus-visible .collection-kicker { max-width: 120px; opacity: 1; }
body.zooming .collection:hover, body.zooming .collection:focus-visible { gap: 10px; padding: 9px 14px 9px 16px; }
body.zooming .collection:hover .collection-name, body.zooming .collection:focus-visible .collection-name { font-size: 16px; }

/* desktop: the title and the close mark on one line, both larger */
@media (min-width: 761px) {
  .index-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 8px 14px; }
  .index-title { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: 0.02em; }
  .index-close { position: static; padding: 6px; color: var(--ink); }
  .index-close .icon svg { width: 30px; height: 30px; stroke-width: 1.2; }
}
.collection-kicker:empty { display: none; }
/* the maker, beside the title, a quiet link */
.index-by { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); text-decoration: none; margin-left: 14px; margin-right: auto; border-bottom: 1px solid transparent; }
.index-by:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 761px) { .index-by { font-size: clamp(15px, 1.3vw, 20px); } }
.index-credits { margin-left: 0; margin-right: 18px; font-style: normal; font-family: var(--sans); font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase; }
/* phones: the names in capitals, each filling its row (sizes set by collections.js) */
@media (max-width: 760px) {
  .index-name, .index-whole span:first-child { text-transform: uppercase; white-space: nowrap; line-height: 1; letter-spacing: 0; }
  .index-entry, .index-whole { align-items: center; }
  .index-whole { display: flex; width: 100%; justify-content: space-between; padding: 14px 18px 14px 20px; border: 1px solid var(--rule); border-radius: 2px; }
  .index-whole span:first-child { font-family: var(--serif); text-transform: uppercase; }
}
@media (max-width: 760px) { .index-entry, .index-whole { max-width: 100%; overflow: hidden; } .index { overflow-x: hidden; } }
/* no counts: the names are enough */
.index-count { display: none !important; }
/* phones: every button the same width and the same padding, the periods' own buttons too */
@media (max-width: 760px) {
  .index-group-name:has(.index-whole) { display: block; margin: 0 0 8px; padding: 0; }
  .index-whole, .index-entry { display: flex; box-sizing: border-box; width: 100%; margin: 0; padding: 14px 18px; gap: 0; justify-content: flex-start; border: 1px solid var(--rule); border-radius: 2px; }
  .index-list { gap: 8px; }
  .index-list li { width: 100%; }
}
@media (max-width: 760px) { .index-whole, .index-entry { max-width: 100%; min-width: 0; overflow: hidden; } .index-group-name:has(.index-whole) { width: 100%; letter-spacing: 0; } }
@media (max-width: 760px) { .index-group, .index-list, .index-list li, .index-body { min-width: 0; max-width: 100%; } .index-name { line-height: 1.05; } }
@media (max-width: 760px) { .index-name { hyphens: none; word-break: keep-all; overflow-wrap: normal; } }

/* phones: the names as lockups. No boxes: each name a stack of lines run edge to
   edge, a hairline between names; the current one in ink, the rest in ink too, plain */
@media (max-width: 760px) {
  .index-body { gap: 0; }
  .index-group { padding: 0; border: 0 !important; }
  .index-group-name:not(:has(.index-whole)) { display: none; }
  .index-group-name:has(.index-whole) { margin: 0; }
  .index-list { gap: 0; }
  .index-whole, .index-entry { display: block; width: 100%; padding: 10px 0 8px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
  .index-entry[aria-current="page"], .index-whole[aria-current="page"] { background: var(--ink); color: var(--paper); padding-left: 0; padding-right: 0; }
  .index-name, .index-whole span:first-child { display: block; font-size: inherit; white-space: normal; }
  .index-line { display: block; font-family: var(--serif); text-transform: uppercase; line-height: 0.86; letter-spacing: -0.01em; white-space: nowrap; padding-top: 0.06em; }
  .index { padding-left: 14px; padding-right: 14px; }
}
.index-foot { display: none; }
@media (max-width: 760px) {
  .index-head .index-credits { display: none; }
  .index-foot { display: block; padding: 28px 0 40px; font: 300 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.6; text-decoration: none; }
  .index-group-name, .index-list, .index-list li { margin: 0 !important; padding: 0; }
  .index-entry[aria-current="page"], .index-whole[aria-current="page"] { outline: 0; box-shadow: none; border-color: var(--ink); }
}

/* desktop: the names as lockups too. No boxes: a hairline between the names of a
   line and under each line, every name set to the line's foot */
@media (min-width: 761px) {
  .index-body { align-items: stretch; }
  .index-whole, .index-entry {
    border: 0; border-left: 1px solid var(--rule); border-radius: 0;
    padding: 0.04em 0 0 0.25em; align-items: flex-end;
  }
  .index-whole.line-start, .index-entry.line-start { border-left: 0; padding-left: 0; }
  .index-whole:hover, .index-entry:hover { border-color: var(--rule); opacity: 0.55; }
  .index-whole[aria-current="page"], .index-entry[aria-current="page"] { background: none; color: var(--ink); border-color: var(--rule); }
  .index-whole[aria-current="page"] span:first-child, .index-entry[aria-current="page"] .index-name { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 0.06em var(--ink); }
  .index-entry .index-name, .index-whole span:first-child { line-height: 0.82; padding-top: 0.06em; }
  .index-break { margin-top: calc(var(--line-gap, 8px) / 2); margin-bottom: calc(var(--line-gap, 8px) / 2); border-top: 1px solid var(--rule); }
}

/* the names in Newsreader, its optical size following the size */
.index-line, .index-entry .index-name, .index-whole span:first-child { font-family: 'Newsreader', var(--serif); font-optical-sizing: auto; }
/* phones: each name in a field of its own, a little apart, no rules */
@media (max-width: 760px) {
  .index-list { display: flex; flex-direction: column; gap: 6px; }
  .index-group { margin-bottom: 6px !important; }
  .index-whole, .index-entry { padding: 13px 14px 9px; border: 0; border-bottom: 0; background: rgba(28, 27, 24, 0.045); }
  .index-entry[aria-current="page"], .index-whole[aria-current="page"] { background: var(--ink); color: var(--paper); padding: 13px 14px 9px; }
  .index-foot { padding-top: 22px; }
}
@media (max-width: 760px) {
  .index-body { display: flex; flex-direction: column; gap: 6px; }
  .index-group, .index-list, .index-list li, .index-group-name:has(.index-whole) { display: contents; }
  .index-group { margin: 0 !important; }
}

/* the type trimmed to its capitals and baseline, so a field or a highlight sits
   evenly around the word on every side */
.index-line, .index-entry .index-name, .index-whole span:first-child { text-box: trim-both cap alphabetic; }
@media (max-width: 760px) {
  .index-line { line-height: 1; padding-top: 0; }
  .index-line + .index-line { margin-top: 0.16em; }
  .index-whole, .index-entry, .index-entry[aria-current="page"], .index-whole[aria-current="page"] { padding: 16px 14px; }
}
/* desktop: each name a lockup, inverted under the pointer and when it is the one shown */
@media (min-width: 761px) {
  .index-entry .index-name, .index-whole span:first-child {
    display: inline-block; line-height: 1; padding: 0.12em 0.1em; box-shadow: none !important;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .index-whole, .index-entry { align-items: center; padding: 0 0 0 0.14em; }
  .index-whole.line-start, .index-entry.line-start { padding-left: 0; }
  .index-whole:hover, .index-entry:hover { opacity: 1; }
  .index-whole:hover span:first-child, .index-entry:hover .index-name,
  .index-whole[aria-current="page"] span:first-child, .index-entry[aria-current="page"] .index-name { background: var(--ink); color: var(--paper); }
}

/* the foot: by Humberto, and the credits */
.index-close { margin-left: auto; }
.index-foot { display: flex; align-items: baseline; gap: 22px; padding: 26px 0 36px; }
.index-foot .index-by { margin: 0; font-size: 17px; }
.index-credits { font: 300 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.index-credits:hover { color: var(--ink); }
@media (min-width: 761px) { .index-foot { padding: 10px 0 2px; } .index-foot .index-by { font-size: clamp(15px, 1.2vw, 18px); } }
@media (max-width: 760px) { .index-line + .index-line { margin-top: 0.24em; } }
/* desktop: the highlight is the only mark of focus, and a line's first name meets the edge */
@media (min-width: 761px) {
  .index-whole:focus-visible, .index-entry:focus-visible, .index-whole[aria-current="page"], .index-entry[aria-current="page"] { outline: 0; }
  .index-whole:focus-visible span:first-child, .index-entry:focus-visible .index-name { background: var(--ink); color: var(--paper); }
  .line-start .index-name, .index-whole.line-start span:first-child { margin-left: -0.1em; }
}
@media (max-width: 760px) { .index-line { text-align: center; } .index-foot { justify-content: center; } }
.index-foot { font: inherit; letter-spacing: 0; text-transform: none; opacity: 1; }
.index-foot .index-by { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; }
/* phones: one panel, the names centred down it, no gaps */
@media (max-width: 760px) {
  .index-body { gap: 0; background: rgba(28, 27, 24, 0.045); }
  .index-whole, .index-entry { background: none; padding: 15px 14px; }
  .index-whole { padding-top: 26px; }
  .index-whole[aria-current="page"], .index-entry[aria-current="page"] { background: var(--ink); padding: 15px 14px; }
}
/* phones: more air between the names, more again above a period */
@media (max-width: 760px) {
  .index-whole, .index-entry { padding: 24px 14px; }
  .index-whole { padding-top: 44px; padding-bottom: 20px; }
  .index-whole[aria-current="page"], .index-entry[aria-current="page"] { padding: 24px 14px; }
}
/* phones: the same space between every name, headings included */
@media (max-width: 760px) {
  .index-whole, .index-entry, .index-whole[aria-current="page"], .index-entry[aria-current="page"] { padding: 26px 14px; }
}
/* the name of the place centred over the menu */
.index-head { position: relative; justify-content: center; }
.index-head .index-title { margin: 0 auto; text-align: center; }
.index-head .index-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 760px) { .index-head .index-close { right: -12px; } }