/* Chapter 1: the dust N, and chapter 2: the two doors. */
.hero { padding: 0; }
.hero-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 100svh;
  padding: calc(var(--bar-h) + 8px) max(var(--margin), env(safe-area-inset-right, 0px)) clamp(20px, 3vw, 40px) max(var(--margin), env(safe-area-inset-left, 0px));
  overflow: hidden;
}
.hero h1 { position: relative; font-size: var(--type-giant); font-weight: 600; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero-lead { display: grid; gap: 18px; width: min(34vw, 420px); }
.hero-lead p { font-size: var(--body-big); font-weight: 500; line-height: 1.4; }
.hero-index { display: grid; gap: 8px; font-size: clamp(15px, 1.15vw, 17px); }
.hero-index a { text-decoration: none; }
.hero-index a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Computers: the pin holds while the dust breaks up, over 60vh of scroll. */
.tier-full .hero { height: 160vh; }
.tier-full .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 0; background: var(--ground); }
.tier-full .hero.scene-on .hero-still { display: none; }
/* The dust gathers on load, so a finished N only shows if the dust is late or never comes. */
.tier-full .hero:not(.scene-on) .hero-still { animation: hero-still-late 0.5s ease 1.4s backwards; }
@keyframes hero-still-late { from { opacity: 0; } }

.doors { display: grid; grid-template-columns: 1fr 1fr; height: 100svh; min-height: 620px; padding: 0; }
.door {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vh, 26px);
  min-width: 0;
  padding: calc(var(--bar-h) + 12px) var(--margin) var(--margin);
  text-decoration: none;
  overflow: hidden;
}
.door h2 { font-size: var(--type-big); }
.door-custom { background: var(--invert-ground); color: var(--invert-ink); }
.door-custom h2 { font-size: var(--type-giant); }
.door-custom .nv-btn { background: var(--invert-ink); color: var(--invert-ground); }
.door-ready { background: var(--ground-2); color: var(--ink); }
.door-say { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: auto; }
.door-text { max-width: 25em; font-size: var(--body-big); line-height: 1.4; }
.door-frames { flex: 1; display: flex; gap: 8px; min-height: 0; overflow: hidden; }
.door-frames img { flex: none; width: auto; height: 100%; aspect-ratio: 414 / 900; object-fit: cover; object-position: top; border-radius: 8px; }
.door:hover .nv-btn { transform: translateY(-2px); }

@media (max-width: 760px) {
  .hero h1 { font-size: 8.5vw; letter-spacing: -0.04em; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-lead { width: 100%; }
  .hero-lead p { font-size: 17px; }
  .hero-index { display: none; }
  /* The words sit over the N on phones, so the dust thins out behind them. */
  .hero-still { -webkit-mask: linear-gradient(transparent 10%, #000 34%, #000 58%, transparent 80%); mask: linear-gradient(transparent 10%, #000 34%, #000 58%, transparent 80%); }
  .doors { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .door { min-height: 86svh; padding-top: 28px; }
  .door-custom { padding-top: calc(var(--bar-h) + 8px); }
  .door-frames { flex: none; height: 40svh; }
}