/* Chapter 9: who we are, how to reach us and where to go, then the name lands in a heap. */
.close {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: clamp(24px, 4vh, 40px) clamp(32px, 6vw, 96px);
  padding-block: calc(var(--bar-h) + 40px) 0;
  background: var(--ground);
  overflow: clip;
}
.close-top { display: grid; align-content: start; gap: 14px; }
.close-about { max-width: 20em; font-size: var(--type-mid); line-height: 1.24; letter-spacing: -0.02em; font-weight: 500; }
.close address { max-width: 24em; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.bigs { display: grid; align-content: start; justify-items: start; gap: 10px; }
.bigs a { font-size: clamp(22px, 2.4vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 0.2s ease; }
.bigs a:hover { text-decoration-color: currentColor; }
.close-nav { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: max-content; align-content: start; gap: 6px clamp(28px, 3.4vw, 56px); font-size: 16px; }
.close-nav a { text-decoration: none; font-weight: 500; }
.close-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The heap at rest, exactly where the fall in scenes/heap.js ends. Numbers are ems from the middle of the floor. */
.pile {
  position: relative;
  grid-column: 1 / -1;
  height: max(48svh, 1.42em);
  min-height: 300px;
  margin-inline: calc(var(--margin) * -1);
  overflow: hidden;
  font-size: min(28vw, 40svh);
  pointer-events: none;
  user-select: none;
}
.pile-l {
  position: absolute;
  left: 50%;
  top: 100%;
  transform-origin: 0 0;
}
.pile-0 { transform: translate(-1.0791em, -0.4632em) rotate(0.0282rad) translate(-0.453em, -0.5096em); }
.pile-1 { transform: translate(-0.1722em, -0.3377em) rotate(-0.4632rad) translate(-0.2916em, -0.3051em); }
.pile-2 { transform: translate(-0.3098em, -1.0149em) rotate(-0.4259rad) translate(-0.3796em, -0.237em); }
.pile-3 { transform: translate(0.3982em, -0.5665em) rotate(0.3704rad) translate(-0.2854em, -0.3391em); }
.pile-4 { transform: translate(0.8974em, -0.6458em) rotate(0.3839rad) translate(-0.2531em, -0.3685em); }
.pile-5 { transform: translate(1.3284em, -0.3288em) rotate(-0.0014rad) translate(-0.3216em, -0.3349em); }

@media (max-width: 760px) {
  .close { grid-template-columns: minmax(0, 1fr); }
  .bigs { gap: 0; }
  .bigs a { display: flex; align-items: center; min-height: 44px; font-size: 24px; }
  .close-nav { grid-auto-columns: minmax(0, 1fr); gap: 0 20px; }
  .close-nav a { display: flex; align-items: center; min-height: 44px; }
  .pile { height: 66vw; min-height: 0; font-size: 36vw; }
  .pile-0 { transform: translate(-0.0288em, -1.1283em) rotate(0.0512rad) translate(-0.453em, -0.5096em); }
  .pile-1 { transform: translate(0.7785em, -0.9873em) rotate(-0.2534rad) translate(-0.2916em, -0.3051em); }
  .pile-2 { transform: translate(-0.8396em, -0.3564em) rotate(-0.3481rad) translate(-0.3796em, -0.237em); }
  .pile-3 { transform: translate(-0.2932em, -0.3312em) rotate(-0.3481rad) translate(-0.2854em, -0.3391em); }
  .pile-4 { transform: translate(0.2855em, -0.3363em) rotate(-0.5024rad) translate(-0.2531em, -0.3685em); }
  .pile-5 { transform: translate(0.8901em, -0.3354em) rotate(0.411rad) translate(-0.3216em, -0.3349em); }
}

/* The last screen: the details on top, and the heap on the floor of the page. */
.tier-full .close { grid-template-rows: auto minmax(0, 1fr); min-height: 100svh; }
.tier-full .pile { height: auto; min-height: 1.42em; }
/* Falling through the words, a letter inverts them instead of melting into them. Same ink as the rest on the ground. */
.tier-full .close.scene-on .pile { z-index: 1; overflow: visible; color: #fff; mix-blend-mode: difference; }
.tier-full .close.scene-on .pile-l { visibility: hidden; }
.tier-full .close.scene-on .pile-l.on { visibility: visible; }
.pile-l.awake { will-change: transform; }