@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-700-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

.index-art { display: none; }
body.index-view {
  isolation: isolate;
  background: white;
}
body.index-view::before {
  inset: -12px;
  z-index: 2;
  mix-blend-mode: multiply;
  background: url(grain.svg) repeat;
  background-size: 132px;
  opacity: .14;
}
.index-view :where(.mast, main, footer) {
  --line: #dddde0;
  --muted: #5d5d62;
  color: #202022;
}
.index-view .intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: clamp(32px,4.7vw,80px) var(--pad) clamp(28px,3vw,52px);
}
.index-view .index-art {
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: url(media/indice-ulivo.jpg) right top / auto 100% no-repeat;
  mix-blend-mode: multiply;
}
.index-view .eyebrow {
  margin-bottom: 14px;
  color: #5f5e63;
  letter-spacing: .14em;
}
.index-view .intro h1 {
  font-size: clamp(54px,6.9vw,114px);
  letter-spacing: -.065em;
  line-height: .96;
}
.index-view .intro h1 em {
  display: block;
  font: italic 700 1.02em/.98 "Playfair Display", Georgia, serif;
  letter-spacing: -.052em;
  color: #a33d65;
}
.index-view .intro .lead {
  max-width: min(52ch,56%);
  margin: 19px 0 0;
  color: #49484d;
  line-height: 1.5;
}
.index-view .collection-bar { border-color: #d9d9db; }
.index-view .collection .dot { background: #b14f74; }
.index-view .collection .count, .index-view footer { color: #626268; }
.index-view .index-row { padding-block: 12px; }
.index-view .index-row strong {
  font-size: clamp(23px,2.65vw,40px);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -.055em;
}
.index-view .index-row img { width: 80px; height: 48px; }
.index-view .index-row:hover, .index-view .index-row:focus-visible { background: #fbf1f5; }
.index-view .index-row .meta { color: #93405e; font-variant-numeric: tabular-nums; }

.index-art i {
  position: absolute;
  top: 22%;
  left: 66%;
  width: 5px;
  height: 9px;
  border-radius: 75% 12% 75% 20%;
  background: #889283;
  opacity: 0;
}
.index-art i:nth-child(2) { left: 73%; top: 13%; --delay: -4s; }
.index-art i:nth-child(3) { left: 82%; top: 27%; --delay: -9s; background: #ad798b; }
.index-art i:nth-child(4) { left: 91%; top: 18%; --delay: -2s; }
.index-art i:nth-child(5) { left: 97%; top: 38%; --delay: -6s; background: #ad798b; }
@media (prefers-reduced-motion: no-preference) {
  body.index-view:not(.reading)::before { animation: paper-grain .85s steps(1,end) infinite; }
  .index-view:not(.reading) .index-art i { animation: olive-drift 12s var(--delay,-7s) ease-in-out infinite; }
}
@keyframes paper-grain {
  0%,100% { transform: translate(0,0); }
  17% { transform: translate(-5px,4px); }
  35% { transform: translate(7px,-3px); }
  51% { transform: translate(-3px,-7px); }
  68% { transform: translate(4px,6px); }
  84% { transform: translate(8px,1px); }
}
@keyframes olive-drift {
  0% { opacity: 0; transform: translate(0,0) rotate(12deg); }
  15% { opacity: .35; }
  55% { transform: translate(-21px,45px) rotate(100deg); }
  80% { opacity: .28; }
  100% { opacity: 0; transform: translate(-56px,90px) rotate(156deg); }
}
@media (max-width:720px) {
  .index-view .intro { padding-block: 29px 23px; }
  .index-view .intro h1 { font-size: clamp(42px,9vw,64px); }
  .index-view .index-art { background-size: auto 86%; background-position: right -90px top; opacity: .68; mask-image: linear-gradient(to right, transparent 12%, #000 83%); }
  .index-view .intro .lead { max-width: 38ch; margin-top: 14px; }
  .index-view .index-row { gap: 10px; padding-block: 10px; }
  .index-view .index-row strong { font-size: clamp(18px,4.7vw,24px); }
  .index-view .index-row img { width: 54px; height: 41px; }
  .index-view .index-row svg { flex-shrink: 0; }
}

/* Reserve space for the shared navigation, then divide the available
   catalogue height between the illustration and five equally sized rows. */
body.index-view { height: 100dvh; min-height: 0; overflow: hidden; }
.index-view main {
  position: absolute;
  inset: var(--header-h) 0 calc(var(--switch-bottom) + 50px);
  width: min(100%, 1760px);
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, .7fr) minmax(0, 1fr);
}
.index-view .intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 0 var(--edge);
}
.index-view .eyebrow { margin-bottom: clamp(6px, 1.2dvh, 14px); }
.index-view .intro h1 { font-size: clamp(37px, min(6.9vw, 8.3dvh), 100px); }
.index-view .intro .lead { margin-top: clamp(7px,1.4dvh,17px); font-size: clamp(12px,1.7dvh,16px); }
.index-view .library { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; }
.index-view .collection-bar { margin-inline: var(--edge); padding-block: 6px; }
.index-view #index { display: grid; grid-template-rows: repeat(5,minmax(0,1fr)); margin: 0 var(--edge); }
.index-view .index-row { padding-block: 0; min-height: 0; }
.index-view .index-row img { height: min(78%,54px); width: auto; aspect-ratio: 1.66; }
.index-view .index-row strong { font-size: clamp(20px,min(2.65vw,4dvh),40px); }
@media (max-width:720px) {
  .index-view .intro h1 { font-size: clamp(35px,min(9vw,7.6dvh),58px); }
  .index-view .intro .lead { max-width: min(90%,42ch); }
  .index-view .index-row strong { font-size: clamp(17px,4.7vw,24px); }
  .index-view .index-row img { max-width: 60px; }
}
@media (max-height:680px) {
  .index-view .intro h1 em { display: inline-block; }
  .index-view main { grid-template-rows: minmax(0,.55fr) minmax(0,1fr); }
  .index-view .intro .lead { line-height: 1.35; }
}
@media (max-width:375px) and (max-height:680px) {
  .index-view main { grid-template-rows: minmax(0,.7fr) minmax(0,1fr); }
  .index-view .intro .lead { max-width: 100%; }
}
@media (min-aspect-ratio: 3/2) and (max-height:590px) {
  .index-view main { grid-template: minmax(0,1fr) / minmax(0,.85fr) minmax(0,1fr); gap: var(--edge); padding-inline: var(--edge); }
  .index-view .intro { padding: 0; }
  .index-view .intro h1 em { display: block; }
  .index-view .intro .lead { max-width: 39ch; }
  .index-view .collection-bar, .index-view #index { margin-inline: 0; }
  .index-view .index-row { gap: 8px; padding-inline: 0; }
  .index-view .index-length { display: none; }
  .index-view .index-row svg { margin-left: auto; }
}