/* layout.css — the act/scroll layout. Single-column (mise-en-page Pattern A) with
   large act numerals hanging in the left margin (the typeset-book section grammar). */

.site-header {
  padding: var(--sp-2xl) 0 var(--sp-xl);
  text-align: center;
}
.site-header h1 {
  font-size: var(--size-3xl);
  font-weight: 600;
  margin-block: var(--sp-sm);
}
.site-header .sub {
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--size-md);
}
.site-header .eyebrow { display: block; margin-bottom: var(--sp-sm); }

/* The walk: a stack of acts. A faint vertical spine threads the descent → ascent. */
.walk { position: relative; }

.act {
  position: relative;
  padding-block: var(--sp-2xl);
  scroll-margin-top: var(--sp-lg);
}
.act + .act { border-top: 1px solid var(--rule); }

/* Act head: numeral + title bound as a unit. */
.act__head { margin-bottom: var(--sp-lg); }
.act__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-md);
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-xs);
}
.act__title { font-size: var(--size-xl); }
.act__intro {
  margin-top: var(--sp-md);
  color: var(--text-secondary);
}
.act__intro strong { color: var(--text); }

/* On wide screens, hang the numeral into the left margin as a weight moment. */
@media (min-width: 1080px) {
  .act__n {
    position: absolute;
    left: max(2vw, calc(50% - var(--measure) / 2 - 5.5rem));
    top: var(--sp-2xl);
    font-size: var(--size-3xl);
    color: var(--bg-3);
    margin: 0;
  }
}

/* The inclusion-test sidebar (spec §1.4) — set apart from body. */
.sidebar-note {
  border-left: 3px solid var(--amber-line);
  background: var(--amber-soft);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block: var(--sp-lg);
}
.sidebar-note .eyebrow { color: var(--amber); }
.sidebar-note p { font-size: var(--size-sm); }

/* Honest edges (§6) — prose, deliberately no widgets. */
.edges { display: grid; gap: var(--sp-lg); margin-top: var(--sp-lg); }
.edge h4 { color: var(--text); margin-bottom: var(--sp-xs); }
.edge p { color: var(--text-secondary); }

/* The close / coda. */
.coda {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--rule-solid);
  text-align: center;
}
.coda p {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-style: italic;
  color: var(--text);
  line-height: var(--lh-subhead);
}

.site-footer {
  padding-block: var(--sp-xl) var(--sp-2xl);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--size-sm);
}
.site-footer .mono { color: var(--text-muted); }

/* A skip link for keyboard users. */
.skip-link {
  position: absolute; left: var(--sp-md); top: -3rem;
  background: var(--bg-2); color: var(--text);
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease); z-index: 50;
}
.skip-link:focus { top: var(--sp-md); }