/* ── page.css — long-form surfaces ───────────────────────────────────────
   Doors, domains, and the reading pages. One 68ch column with the label in
   the left margin on wide screens as a quiet eyebrow.                     */

.page-head {
  padding-top: clamp(2.5rem, 1rem + 6vw, 5rem);
  padding-bottom: var(--s5);
}

.page-head h1 { max-width: 22ch; }

.page-head__lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin-top: var(--s3);
}

/* The door/domain label, hung in the left margin where there is room. */
@media (min-width: 68rem) {
  .prose { position: relative; }
  .prose > .eyebrow--hung {
    position: absolute;
    left: -11rem;
    width: 9rem;
    text-align: right;
    margin: 0;
  }
}

/* ── the numbered teaching blocks on /finding ─────────────────────────── */
.finding__block {
  margin: var(--s5) 0;
  padding-left: var(--s4);
  border-left: var(--stroke) solid var(--line-strong);
}

.finding__block h3 {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 550;
  margin: 0 0 var(--s2);
}

.finding__block:hover { border-left-color: var(--rule); }

/* ── the turn — a sky band interrupting a ground page ─────────────────────
   The visual grammar doing the teaching: the question that points past the
   domain gets the colour of the thing it points at.                       */
.turn {
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  margin: var(--s6) 0;
  text-align: center;
}

.turn__q {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 350;
  line-height: 1.35;
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}

.turn .eyebrow { color: var(--ink-3); }

/* ── objection block — every door publishes its strongest objection ───── */
.objection {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin: var(--s5) 0;
  background: var(--page-2);
}

:root[data-theme='dark'] .objection,
.sky .objection { background: transparent; }

.objection h3 { margin-top: 0; }

/* ── index grids ──────────────────────────────────────────────────────── */
.index-grid { margin-top: var(--s5); }

.card--door { position: relative; }

.card--door .card__glyph { margin-bottom: var(--s2); }

/* ── the honesty ladder on /science ───────────────────────────────────── */
.rung {
  margin: var(--s5) 0;
  padding-left: var(--s4);
  border-left: var(--stroke) solid var(--line-strong);
}

.rung__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}

.rung h3 { margin: 0; }

/* ── question list ────────────────────────────────────────────────────── */
.qa { margin: var(--s5) 0; }

.qa h3 {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 550;
  margin: 0 0 var(--s2);
}

.qa + .qa {
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* ── day cards on /begin ──────────────────────────────────────────────── */
.day {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  background: var(--card);
}

.day__n {
  font-family: var(--font-util);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s1);
}

.day h3 { margin: 0 0 var(--s2); font-size: var(--t-base); }
.day p { color: var(--ink-2); margin: 0; }

/* ── caution — self-inquiry and silence carry a plain warning ─────────── */
.caution {
  border-left: var(--stroke) solid var(--line-strong);
  padding-left: var(--s3);
  margin: var(--s5) 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}