/* layout.css — grille du mur, jambage et assise (DNA §7) */

/* ── Mur · grille 12 colonnes ─────────────────────────── */
.wall {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  padding-block: var(--s-7) var(--s-section);
}

/* ── Jambage · sous 64rem : linteau au-dessus du corps ── */
.wall__jamb {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "dial kicker"
    "dial gloss";
  align-items: end;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  padding-block-end: var(--s-4);
  border-block-end: var(--stroke-hair) solid var(--c-line);
}

/* ── Corps · pleine largeur sous 64rem ── */
.wall__body {
  grid-column: 1 / -1;
  min-inline-size: 0;
  container: wall / inline-size;
}

/* enfants directs seulement : les listes imbriquées gardent leur propre rythme */
.wall__body > * + * {
  margin-block-start: var(--s-5);
}

.wall__body > p {
  max-inline-size: var(--measure);
}

/* ── Heure de chaque mouvement : le soleil du jambage se tient à son heure (§8) ── */
[data-hour-zone="matin"]    { --zone-angle: -36deg; --zone-sun: var(--c-sun); }
[data-hour-zone="midi"]     { --zone-angle: 0deg;   --zone-sun: var(--c-sun); }
[data-hour-zone="couchant"] { --zone-angle: 40deg;  --zone-sun: var(--c-terra); }

/* ── Jambage · contenu : cadran, libellé, heure, glose ── */
.jamb__dial {
  grid-area: dial;
  inline-size: 3.5rem;
  aspect-ratio: 100 / 72;
  color: var(--c-ink);
}

.jamb__sun {
  color: var(--zone-sun, var(--c-sun));
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: rotate(calc(var(--zone-angle, 0deg) * var(--sun-dir)));
}

.jamb__kicker {
  font-family: var(--f-label);
  grid-area: kicker;
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-terra-text);
}

/* l'heure se lit dans le cadran ; en texte, elle suit le libellé */
.jamb__hour {
  font-family: var(--f-label);
  grid-area: kicker;
  justify-self: end;
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.jamb__gloss {
  grid-area: gloss;
  font-family: var(--f-title);
  font-size: var(--t-lg);
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  color: var(--c-ink);
  text-wrap: balance;
}

/* ── Jambage · ≥64rem : pilier collant, filet en bout de ligne ── */
@media (min-width: 64rem) {
  .wall {
    row-gap: 0;
  }

  .wall__jamb {
    grid-column: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "dial"
      "hour"
      "kicker"
      "gloss";
    align-items: start;
    align-self: start;
    row-gap: var(--s-2);
    position: sticky;
    inset-block-start: calc(var(--head-h) + var(--s-6));
    padding-block: var(--s-3) var(--s-6);
    padding-inline-end: var(--gutter);
    border-block-end: none;
    border-inline-end: var(--stroke-hair) solid var(--c-line);
  }

  .jamb__dial {
    inline-size: min(100%, var(--jamb-dial-w));
    margin-block-end: var(--s-2);
  }

  .jamb__hour {
    grid-area: hour;
    justify-self: start;
  }

  .jamb__kicker {
    margin-block-start: var(--s-4);
  }

  .jamb__gloss {
    font-size: var(--t-xl);
  }

  .wall__body {
    grid-column: 4 / -1;
  }
}

/* ── Titres du mur : grande capitale de section, légère ── */
.wall__title {
  font-family: var(--f-title);
  font-size: var(--t-3xl);
  font-weight: var(--w-display-light);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-inline-size: 14ch;
}

.wall__lede {
  font-family: var(--f-lede);
  font-size: var(--t-xl);
  font-weight: var(--w-display);
  line-height: 1.3;
  letter-spacing: var(--track-title);
  color: var(--c-ink);
}

.wall__body > .wall__lede {
  max-inline-size: 30ch;
  margin-block-start: var(--s-6);
}