/* /sitemap — the site drawn as a tree. See templates/sitemap.php.

   Every line in the diagram is a hairline in --color-3, the colour of the
   frame down the sides of the page, and is drawn here with borders on
   pseudo-elements: the markup is only nested lists. Two shapes from the same
   markup:

     narrow   an outline: a rail down the left, a tick out to each page
     wide     a chart: the home page on top, the menu's pages in a row under
              a bar, each with its own pages hanging below it

   The chart needs the whole menu in one row to read as one; below 1180px it
   wraps, and the outline is used instead. */

.sitemap {
  --line: 1px solid var(--color-3);
  --drop: 28px;
  --leaf-thumb: 44px;

  max-width: var(--page-width);
  margin: 0 auto 100px;
}

.sitemap .page-title {
  text-transform: uppercase;
  font-size: var(--font-size-2);
  letter-spacing: 1px;
  margin: 40px 0 8px;
}

.sitemap__lede {
  color: var(--color-7);
  font-size: var(--font-size-8);
  margin-bottom: 36px;
}

.sitemap ol,
.sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------------- a page */

.sitemap__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.sitemap__thumb {
  flex: none;
  display: block;
  width: var(--leaf-thumb);
  height: var(--leaf-thumb);
  background: var(--color-8);
  outline: var(--line);
  overflow: hidden;
}

.sitemap__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.sitemap__link:hover .sitemap__thumb img { transform: scale(1.05); }

/* A page with no picture of its own shows its initial, set like a drop cap. */
.sitemap__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--font-size-2);
  color: var(--color-4);
}

.sitemap__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sitemap__title {
  font-size: var(--font-size-7);
  line-height: 1.2;
}

.sitemap__link:hover .sitemap__title {
  color: var(--color-5);
}

.sitemap__path,
.sitemap__note {
  font-family: var(--font-family-2);
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sitemap__path { color: var(--color-4); }
.sitemap__note { color: var(--color-7); }

/* The home page and the menu's pages carry a bigger picture than the pages
   under them. */
.sitemap__node--root .sitemap__thumb,
.sitemap__node--branch .sitemap__thumb {
  --leaf-thumb: 88px;
}

.sitemap__node--root .sitemap__title,
.sitemap__node--branch .sitemap__title {
  font-size: var(--font-size-2);
}

/* A row of small pictures — a few of the paintings under Artwork, this year's
   months under One Painting a Month. Each is a link of its own. */
.sitemap__mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px;
  max-width: 320px;
  margin-top: 10px;
}

.sitemap__mosaic a {
  display: block;
  aspect-ratio: 1;
  background: var(--color-8);
  overflow: hidden;
}

.sitemap__mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .2s ease;
}

.sitemap__mosaic a:hover img { opacity: .75; }

.sitemap__node--leaf .sitemap__mosaic {
  margin-left: calc(var(--leaf-thumb) + 12px);
  max-width: 240px;
}

/* -------------------------------------------------- the outline (narrow) */

/* A rail down the left of a list, and a tick out to each item: drawn per item,
   so the last one can stop the rail at its own tick rather than running on
   past it. --tick-at is where the tick meets the item: its padding, then
   half its picture. */
.sitemap__branches > li,
.sitemap__leaves > li {
  position: relative;
  padding-left: 26px;
}

.sitemap__branches > li { padding-top: 22px; --tick-at: calc(22px + 44px); }
.sitemap__leaves > li   { padding-top: 12px; --tick-at: calc(12px + 22px); }

.sitemap__branches > li::before,
.sitemap__leaves > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: var(--line);
}

.sitemap__branches > li:last-child::before,
.sitemap__leaves > li:last-child::before {
  bottom: auto;
  height: var(--tick-at);
}

.sitemap__branches > li::after,
.sitemap__leaves > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: var(--tick-at);
  width: 18px;
  border-top: var(--line);
}

/* The rail starts under the middle of the home page's picture. */
.sitemap__branches {
  margin-left: 44px;
}

.sitemap__leaves {
  margin-left: 44px;
}

/* The pages that are not in the menu stand on their own, no rail. */
.sitemap__heading {
  text-transform: uppercase;
  font-size: var(--font-size-4);
  letter-spacing: 1px;
  color: var(--color-7);
  margin: 64px 0 4px;
  padding-top: 24px;
  border-top: var(--line);
}

.sitemap__extra {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 40px;
}

/* min-width so a long address is cut short with an ellipsis rather than
   widening its column past the edge of a phone. */
.sitemap__extra > .sitemap__branch {
  padding-top: 22px;
  min-width: 0;
}

/* ---------------------------------------------------- the chart (wide) */

@media (min-width: 1180px) {
  .sitemap {
    --gap: 22px;
    --leaf-thumb: 40px;
  }

  .sitemap__root {
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: var(--drop);
  }

  /* Down from the home page to the bar. */
  .sitemap__root::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: var(--drop);
    border-left: var(--line);
  }

  .sitemap__node--root {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sitemap__node--root .sitemap__link {
    flex-direction: column;
  }

  .sitemap__node--root .sitemap__thumb {
    width: 240px;
    height: 150px;
  }

  .sitemap__branches {
    display: grid;
    grid-template-columns: repeat(var(--branches), minmax(0, 1fr));
    gap: var(--gap);
    margin-left: 0;
  }

  .sitemap__branches > li {
    padding: var(--drop) 0 0;
  }

  /* The bar along the top of the row: each column draws its own share of it,
     half a gap out either side so the shares meet; the end columns start and
     stop at their middles. */
  .sitemap__branches > li::before,
  .sitemap__branches > li:last-child::before {
    top: 0;
    bottom: auto;
    height: auto;
    left: calc(var(--gap) / -2);
    right: calc(var(--gap) / -2);
    border-left: 0;
    border-top: var(--line);
  }

  .sitemap__branches > li:first-child::before { left: 50%; }
  .sitemap__branches > li:last-child::before { right: 50%; }

  /* And down from the bar to each column's page. */
  .sitemap__branches > li::after {
    top: 0;
    left: 50%;
    width: 0;
    height: var(--drop);
    border-top: 0;
    border-left: var(--line);
  }

  /* Each of the menu's pages as a card: its picture across the column. */
  .sitemap__branches .sitemap__node--branch .sitemap__link {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sitemap__branches .sitemap__node--branch .sitemap__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .sitemap__branches .sitemap__node--branch .sitemap__text {
    text-align: center;
  }

  .sitemap__branches .sitemap__mosaic {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }

  /* The rail runs up to the card it hangs from, rather than starting a gap
     below it. */
  .sitemap__branches .sitemap__leaves {
    position: relative;
    margin: 0 0 0 calc(var(--leaf-thumb) / 2);
    padding-top: 14px;
  }

  .sitemap__branches .sitemap__leaves::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 14px;
    border-left: var(--line);
  }

  .sitemap__leaves > li {
    padding-left: 16px;
    --tick-at: calc(12px + var(--leaf-thumb) / 2);
  }

  .sitemap__leaves > li::after { width: 12px; }

  .sitemap__node--leaf .sitemap__title { font-size: var(--font-size-8); }

  .sitemap__node--leaf .sitemap__mosaic {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 600px) {
  .sitemap__node--root .sitemap__thumb,
  .sitemap__node--branch .sitemap__thumb {
    --leaf-thumb: 64px;
  }

  .sitemap__branches { margin-left: 32px; }
  .sitemap__branches > li { --tick-at: calc(22px + 32px); }
  .sitemap__leaves { margin-left: 32px; }
  .sitemap__leaves > li { padding-left: 18px; }
  .sitemap__leaves > li::after { width: 12px; }
}