/* ==========================================================================
   HAVEN. — the four ways in.

   Four typographic rows and one window. Not four cards, and not a tab strip:
   the rows are the chapter, and pressing one reshapes the window beside them.

   THREE ARRANGEMENTS, FOUR INTENTIONS. HAVEN.shapes in content.js says which
   intention takes which; this file says what they mean. What NONE of them
   changes is the window's width — that is the invariant the whole image
   pipeline rests on — so the reorganisation is about where the reading text
   sits and how much room the index gets, and the drama is left to the window,
   which changes aspect from a 1.9 landscape to a 0.9 portrait between BUY and
   RENT.
   ========================================================================== */
.intent { padding: 14vh 0 12vh; }

.work {
  display: grid;
  gap: 2.6rem;
  margin-top: 4.5rem;
}

.work__label { color: var(--ink-45); margin-bottom: 1.2rem; }

.work__read {
  border-top: 1px solid var(--ink-18);
  padding-top: 1.4rem;
  /* the reading text is replaced wholesale when the intention changes, so it
     is re-shown rather than cross-faded: a hard, short arrival that matches
     the window's wipe. */
  animation: read-in .55s var(--ease) both;
}
@keyframes read-in {
  from { opacity: 0; transform: translateY(.7rem); }
  to   { opacity: 1; transform: none; }
}
.work__line { max-width: 20ch; }
.work__read .lead { margin-top: 1rem; }

@media (min-width: 900px) {
  .work {
    grid-template-columns: 1fr 660px;
    gap: 3rem 4rem;
    align-items: start;
  }
  .work__index { grid-area: index; }
  .work__frame { grid-area: frame; }
  .work__read  { grid-area: read; }

  /* wide — the index keeps the room and the reading text sits under the
     window. BUY and INVEST, whose photographs are landscape. */
  .work[data-shape="wide"] {
    grid-template-columns: 1fr 660px;
    grid-template-areas: "index frame" "index read";
  }
  /* tall — the window is portrait and there is no room under it, so the
     reading text moves to the left column and the index compresses. RENT. */
  .work[data-shape="tall"] {
    grid-template-columns: .82fr 660px;
    grid-template-areas: "index frame" "read frame";
  }
  /* even — index and window carry the same weight and the text runs the full
     measure underneath both. RELOCATE, which is the chapter with the most to
     say. */
  .work[data-shape="even"] {
    grid-template-columns: 1fr 660px;
    grid-template-areas: "index frame" "read read";
  }
  .work[data-shape="even"] .work__read { max-width: none; }
  .work[data-shape="even"] .work__read .lead { max-width: 58ch; }
}

@media (max-width: 899px) {
  .intent { padding: 9vh 0 8vh; }
  /* on a phone the window comes FIRST: a row you press has to reshape
     something you can see, and there is no room beside it. */
  .work { grid-template-columns: 1fr; }
  .work__frame { order: -1; }
  .work__index { order: 0; }
  .work__read { order: 1; }
  .row__hit { min-height: 56px; }
}