/* =========================
   Index page
   ========================= */
.index-page{
  --index-az-font: clamp(19px, 1.75vw, 28px);
  --index-sticky-pad: clamp(12px, 2.1vw, 18px);
  --index-column-gap: clamp(24px, 3vw, 60px);
  --index-entry-gap: clamp(18px, 2.4vw, 36px);
  --index-scroll-gap: clamp(8px, 1vw, 10px);
  --index-scroll-offset: calc(
    var(--index-sticky-h, calc(var(--index-sticky-pad) * 2 + var(--index-az-font) + 56px)) + var(--index-scroll-gap)
  );

  max-width: none;
  margin: 0;
 /* padding-top: var(--section-first-gap);*/
}

.index-sticky{
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
  padding: var(--index-sticky-pad) var(--grid-right) var(--index-sticky-pad) var(--frame-left);
}

.index-sticky-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.index-sticky-top{
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform var(--index-arrow-trigger-ms) var(--arrow-motion-ease);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.index-sticky-top:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

.index-az-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(2px, 0.35vw, 8px);
  row-gap: clamp(10px, 1.2vw, 14px);
  font-size: var(--index-az-font);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-az-link,
.index-az-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin: 0 -2px;
  color: inherit;
}

.index-az-link{
  font-weight: 900;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.index-az-top{
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  margin-left: .6em;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform var(--index-arrow-trigger-ms) var(--arrow-motion-ease);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.index-sticky-top.is-triggered,
.index-az-top.is-triggered{
  transform: translate3d(0, var(--index-arrow-trigger-shift), 0) scale3d(var(--index-arrow-trigger-scale), var(--index-arrow-trigger-scale), 1);
}

.index-az-item.is-disabled{
  font-weight: 400;
  text-decoration: none;
}

/* A–Z hover */
@media (hover:hover) and (pointer:fine){
  .index-az-link{
    position: relative;
    border-radius: 2px;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  .index-az-link:hover{
    background: var(--accent);
    transform: translate3d(0, -2px, 0);
  }
}

/* Keyboard focus should be obvious */
.index-az-link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
  background: var(--accent);
}

.index-cta{
  justify-self: end;
  margin-top: 0;
}

.index-letter{
  scroll-margin-top: var(--index-scroll-offset);
  max-width: none;
  width: 100%;
  margin-right: 0;
  padding-right: var(--grid-right);
}

.index-letter .section-label{
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.index-letter .section-label::before{
  content: none;
}

.index-letter .section-label::after{
  content:"";
  flex: 1;
  height: 8px;
  background: currentColor;
  opacity: 1;
}

.index-page > .index-letter.section:first-of-type{ margin-top: clamp(12px, 1.6vw, 24px); }
.index-letter.section{ margin-top: clamp(22px, 3vw, 56px); }

.index-columns {
  display: block;
  width: 100%;
  column-width: 260px;
  column-gap: var(--index-column-gap);
  column-fill: balance;
  margin-top: clamp(12px, 2vw, 22px);
}

.index-entry {
  display: inline-block; /* Keep this for Safari */
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--index-entry-gap) 0;
  vertical-align: top;
}

.index-letter .section-label h2{
  margin: 0;
}

.index-letter .index-tagline{
  margin: 0 0 0.55rem;
  font-size: clamp(16.5px, 1.1vw, 20px);
  line-height: 1.35;
}

.index-letter .index-site-row{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 0.7rem;
}

.index-site-row > a{
  font-size: clamp(16.5px, 1.1vw, 20px);
  display: inline-block;
  margin: 0;
}

.index-site-row .site-save-control{
  flex: 0 0 auto;
}

.index-webrings{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: clamp(16.5px, 1.1vw, 20px);
  line-height: 1.3;
  padding-top: 0.3rem;
}

.index-letter .index-webrings a:not(.cta-row){
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.index-letter .index-webrings a:not(.cta-row)::after{
  content: none;
}

.index-webring-arrow{
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}

.index-webring-link:hover .index-webring-arrow,
.index-webring-link:focus-visible .index-webring-arrow{
  transform: translate3d(4px, 0, 0);
}

.index-end{
  margin: clamp(20px, 4vh, 60px) 0 0;
  padding: 0 var(--grid-right) clamp(32px, 10vh, 120px) var(--frame-left);
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
}

@media (min-width: 935px){
.index-page-body .to-top{
    position: absolute;
    right: var(--arrow-right);
    bottom: var(--to-top-bottom-safe);
  }
}

@media (prefers-reduced-motion: reduce){
  .index-sticky-top,
  .index-az-top{
    transition: none;
  }

  .index-sticky-top.is-triggered,
  .index-az-top.is-triggered{
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@media (max-width: 1100px){
  .index-columns{ column-width: 220px; }
}

@media (max-width: 720px){
  .index-page{
    --index-scroll-offset: calc(
      var(--index-sticky-h, calc(var(--index-sticky-pad) * 2 + var(--index-az-font) * 2 + 88px)) + var(--index-scroll-gap)
    );
  }

  .index-az{
    display: none;
  }

  .index-sticky-top{
    display: none;
    grid-column: 1;
    justify-self: start;
    font-size: 1.8em;
  }

  .index-sticky.is-stuck .index-sticky-top{
    display: inline-flex;
  }

  .index-sticky-inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: normal;
  }

  .index-cta{
    grid-column: 3;
    justify-self: end;
  }

  .index-entry{
    padding-bottom: clamp(14px, 3vw, 22px);
    margin-bottom: clamp(18px, 4vw, 30px);
  }
}