/* ==========================================================================
   HAVEN. — a home is only one part of the move.

   Four editorial chapter tabs. Opening one EXPANDS it and compresses the other
   three: the tabs are laid out with grid-template-rows and the open one takes
   the free space, so the movement is a layout resize rather than a height
   animation on a hidden panel. That is the difference the brief asks for
   between this and a generic accordion — nothing fades up, the stack
   redistributes.
   ========================================================================== */
.move { padding: 12vh 0; }

.move__body {
  display: grid;
  gap: 2.6rem;
  margin-top: 4.5rem;
  align-items: start;
}

.stack { border-top: 1px solid var(--ink-18); }
.stack__tab { border-bottom: 1px solid var(--ink-18); }
.stack__hit {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  border: 0; background: none; text-align: left; cursor: pointer;
  transition: padding .5s var(--ease);
}
.stack__tab[data-open="true"] .stack__hit { padding-bottom: .5rem; }
.stack__no { font-size: .68rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-45); }
.stack__label {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  transition: color .3s var(--ease);
}
.stack__tab[data-open="true"] .stack__label { color: var(--deep); }
.stack__mark { font-size: .8rem; color: var(--ink-45); }

/* the compressed tabs give their room to the open one. A grid row of 0fr
   collapses to its content; 1fr takes what is left. */
.stack__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .62s var(--ease-window);
}
.stack__tab[data-open="true"] .stack__panel { grid-template-rows: 1fr; }
.stack__panelInner { overflow: hidden; }
.stack__line {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--deep);
  margin: 0 0 .6rem;
}
.stack__body {
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 44ch;
  margin: 0 0 1.4rem;
}

.move__read {
  border-top: 1px solid var(--ink-18);
  padding-top: 1.4rem;
  margin-top: 1.6rem;
  animation: read-in .55s var(--ease) both;
}

@media (min-width: 900px) {
  .move__body { grid-template-columns: 1fr 660px; gap: 4rem; }
  /* on a wide screen the open chapter's own text is enough; the panel beside
     the window repeats the line only, so the reader is not given the same
     paragraph twice */
  .move__read .lead { display: none; }
}
@media (max-width: 899px) {
  .move { padding: 8vh 0; }
  /* the whole stage, not just the frame: the frame is a grandchild of the
     grid and order only sorts children */
  .move__stage { order: -1; }
  .stack__hit { min-height: 56px; }
  .move__read { display: none; }
}