/* =========================
   Base / Reset
========================= */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* =========================
   Layout
========================= */

main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
}

.paragraph-list {
  padding-top: 12pt;
  grid-column: 2 / 5;
  margin-bottom: 20vh;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* =========================
   Paragraphs
========================= */

.paragraph {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  margin-bottom: 12pt;
  padding: 6pt 8pt 64pt;

  background: #fff;
  font-size: 9pt;

  filter: drop-shadow(-2px -1px 10px rgba(63, 63, 63, 0.35));
}

.paragraph-title {
  width: 100%;
  line-height: 24pt;
  margin-block-end: 12pt;
  text-align: center;
  border-bottom: 1pt solid black;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12pt;
}

p {
  width: 100%;
  margin: 0;
  margin-block-end: 1rem;
}

strong {
  display: inline-block;
  padding-bottom: 8pt;
}

a {
  color: red;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* =========================
   Index Panel
========================= */

.index {
  position: fixed;
  top: 0;
  left: 25%;
  z-index: 1;
  text-transform: uppercase;

  width: 50%;
  height: 100%;
  max-height: 0;

  overflow: hidden;

  padding: 0 24pt;

  background: #fff;
  opacity: 1;

  background-size: 24pt 24pt;
  background-image:
    repeating-linear-gradient(0deg,
      #222222,
      #222222 0.5px,
      #ffffff 0.5px,
      #ffffff);

  box-shadow: inset 5px 5px 15px 13px #000000;

  transition: max-height 0.5s ease;

  /* mask */
  -webkit-mask-image: url("/assets/images/graphics/mask-crack-horizontal_list.svg");
  mask-image: url("/assets/images/graphics/mask-crack-horizontal_list.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: top;
  mask-position: top;

  -webkit-mask-size: 100%;
  mask-size: 100%;
}

.index.show {
  max-height: 100vh;
  overflow-y: auto;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.index.show::-webkit-scrollbar {
  display: none;
}

/* =========================
   Index Menu
========================= */

.index-menu {
  text-transform: uppercase;
  position: fixed;
  top: 18pt;
  right: 6pt;
  z-index: 2;
  border-bottom: 1pt solid black;
  width: 25%;
  line-height: 24pt;

  color: red;
  cursor: pointer;
}

/* =========================
   Paragraph Index
========================= */

.paragraph-index {
  font-size: 18pt;
  line-height: 24pt;
}

.paragraph-index:first-of-type {
  margin-top: 24pt;
}

.paragraph-index:last-of-type {
  margin-bottom: 24pt;
}

/* original indentation rhythm */

.index .paragraph-index:nth-child(6n + 1) {
  padding-left: 0pt;
}

.index .paragraph-index:nth-child(6n + 2) {
  padding-left: 12pt;
}

.index .paragraph-index:nth-child(6n + 3) {
  padding-left: 24pt;
}

.index .paragraph-index:nth-child(6n + 4) {
  padding-left: 48pt;
}

.index .paragraph-index:nth-child(6n + 5) {
  padding-left: 96pt;
}

.index .paragraph-index:nth-child(6n + 6) {
  padding-left: 192pt;
}

/* =========================
   Mobile
========================= */

@media (max-width: 768px) {
  main {
    grid-template-columns: 1fr;
  }

  .paragraph-list {
    grid-column: 1;
  }

  .index-menu {
    border-bottom: none;
    text-align: right;
  }

  .index {
    top: 0;
    left: 0;

    width: 100%;

    -webkit-mask-position: top;
    mask-position: top;

    -webkit-mask-image: url("/assets/images/graphics/mask-crack-vertical.svg");
    mask-image: url("/assets/images/graphics/mask-crack-vertical.svg");
  }
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .index {
    transition: none;
  }
}