/* ==========================================================================
   HAVEN. — real decisions need context.

   After five chapters of interface, one chapter with none. The window docks
   into a wide band and stays there while the reader reads; the only other
   photograph on the page that is not in the lens is the small upright plate
   beside the copy, and it is the only element on the site with a parallax on
   it.
   ========================================================================== */
.guide { padding: 14vh 0 12vh; }

/* a direct child of the section rather than of a .wrap, so that it stays
   BELOW the lens in the paint order — see base.css. It therefore has to carry
   the wrap width itself. */
.guide__frame { width: var(--wrap); margin: 8vh auto 0; }

.guide__body {
  display: grid;
  gap: 3rem;
  align-items: start;
}
.guide__copy .work__label { color: var(--ink-45); margin-top: 3rem; }

@media (min-width: 900px) {
  .guide__body { grid-template-columns: 1fr 300px; gap: 5rem; }
  .guide__plate { margin-top: 4rem; }
}
@media (max-width: 899px) {
  .guide { padding: 9vh 0; }
  .guide__plate { display: none; }
  /* same reason as the island band: a 3.08 strip is 110px tall on a phone */
  .guide__frame { aspect-ratio: 3 / 2; }
}