/* Tail layouts for sections 03-06. One file, four modes, layout only.
   A class on .skin-home selects one. Nothing here touches palette, type,
   the descent, or the section order. Loaded after home.css. */

/* ---------- A · SEAMS ---------------------------------------------------
   Removing the per-section grounds removed every boundary too. A one-step
   tonal shift per section plus a gold hairline gives the four sections
   edges again without reintroducing four different colours. */
.tail-a .cater,
.tail-a .join { background-color: #191411; }
.tail-a .e1-hood,
.tail-a .e1-visit { background-color: #1C1613; }
.tail-a .cater,
.tail-a .e1-hood,
.tail-a .join,
.tail-a .e1-visit { position: relative; }
.tail-a .cater::before,
.tail-a .e1-hood::before,
.tail-a .join::before,
.tail-a .e1-visit::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--cheese-gold);
  opacity: 0.5;
}

/* ---------- B · TWO COLUMNS -------------------------------------------
   Three of the four stack two distinct things. Unstacked: catering's copy
   beside its checklist, the mural beside the story, the visit facts in
   three columns. Collapses back to one column at 720px, so 390 is
   unchanged. */
@media (min-width: 721px) {
  .tail-b .cater .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "head list"
      "lede list"
      "ready list"
      "call list"
      "note list";
    column-gap: 48px;
    align-items: start;
  }
  .tail-b .cater .wrap > h2 { grid-area: head; }
  .tail-b .cater-lede { grid-area: lede; }
  .tail-b .cater-ready { grid-area: ready; }
  .tail-b .cater-list {
    grid-area: list;
    align-self: start;
    border: var(--key) solid var(--outline);
    border-radius: 18px;
    padding: 22px 24px;
    background: rgba(247, 227, 176, 0.05);
  }
  .tail-b .cater-call { grid-area: call; justify-self: start; }
  .tail-b .cater-note { grid-area: note; }

  .tail-b .e1-hood-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    column-gap: 44px;
    align-items: center;
  }
  .tail-b .e1-mural { margin: 0; }
  .tail-b .e1-mural img { width: 100%; height: auto; display: block; }

  .tail-b .e1-visit .e1-visit-grid,
  .tail-b .e1-visit .e1-wrap > div:not(.e1-sechead) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    align-items: start;
  }
}

/* ---------- C · THE LIST AS A WIDE BAND -------------------------------
   05's control wants the full measure, not a left rail. Heading and copy
   on the left, the form flush right on the same row. */
@media (min-width: 721px) {
  .tail-c .join .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
    column-gap: 48px;
    align-items: center;
  }
  .tail-c .join .wrap > h2 { grid-column: 1; margin-bottom: 6px; }
  .tail-c .join .wrap > p { grid-column: 1; margin: 0; }
  .tail-c .joinform {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 12px;
    align-items: stretch;
  }
  .tail-c .joinform input { flex: 1 1 auto; min-width: 0; }
}
.tail-c .join { background-color: #191411; }

/* ---------- D · ALTERNATING RAIL --------------------------------------
   Same single column, but it stops sitting in the same place every time.
   Buys nothing at 390px, which is the width Thursday is demoed at. */
@media (min-width: 721px) {
  .tail-d .cater .wrap > *,
  .tail-d .join .wrap > * { max-width: 62ch; }
  .tail-d .e1-hood .e1-hood-copy { max-width: 62ch; margin-left: auto; }
  .tail-d .e1-hood .e1-sechead { text-align: right; }
  .tail-d .join .wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .tail-d .join .joinform { width: min(100%, 560px); }
  .tail-d .e1-visit .e1-wrap > div:not(.e1-sechead) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}