/* ──────────────────────────────────────────────
   Five Acts visual — Vitruvian + descent-ascent arc
   ────────────────────────────────────────────── */
.m-five-acts {
  margin: 64px auto;
  max-width: 1200px;
  padding: 0 32px;
}
.m-five-acts__head {
  text-align: center;
  margin-bottom: 36px;
}
.m-five-acts__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 500;
}
.m-five-acts__caption {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  color: var(--pulp);
  margin: 0;
  text-wrap: balance;
}
.m-five-acts__caption em {
  color: var(--gold);
  font-style: italic;
}
.m-five-acts__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 620;
}
.m-five-acts__vitruvian {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}
.m-five-acts__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.m-five-acts__svg path,
.m-five-acts__svg line,
.m-five-acts__svg circle {
  /* override burgundy → gold against dark backgrounds */
}
.m-section--ink .m-five-acts__svg path,
.m-section--ink .m-five-acts__svg line[stroke="var(--burgundy)"],
.m-section--ink .m-five-acts__svg circle[fill="var(--burgundy)"],
.m-section--burgundy .m-five-acts__svg path,
.m-section--burgundy .m-five-acts__svg line[stroke="var(--burgundy)"],
.m-section--burgundy .m-five-acts__svg circle[fill="var(--burgundy)"] {
  /* Note: handled via inline stroke on dark — see component variant below */
}

.m-five-acts__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.m-five-acts__node {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 130px;
  pointer-events: auto;
}
/* Node label-positioning: top row sit above their node, bottom node sits below */
.m-five-acts__node--1,
.m-five-acts__node--2,
.m-five-acts__node--4,
.m-five-acts__node--5 {
  transform: translate(-50%, calc(-100% - 22px));
}
.m-five-acts__node--3 {
  transform: translate(-50%, 22px);
}

.m-five-acts__roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.m-five-acts__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--pulp);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.m-five-acts__phase {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(237, 229, 211, 0.6);
  margin-bottom: 2px;
}
.m-five-acts__sessions {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.m-five-acts__foot {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  text-align: center;
  color: rgba(237, 229, 211, 0.7);
  margin-top: 28px;
}
.m-five-acts__foot em {
  color: var(--gold);
  font-style: italic;
}

/* ── On burgundy/ink background — flip the arc & marks to gold */
.m-section--ink .m-five-acts__svg [stroke="var(--burgundy)"],
.m-section--burgundy .m-five-acts__svg [stroke="var(--burgundy)"] {
  stroke: var(--gold);
}
.m-section--ink .m-five-acts__svg [fill="var(--burgundy)"],
.m-section--burgundy .m-five-acts__svg [fill="var(--burgundy)"] {
  fill: var(--gold);
}

/* ── Light background variants */
.m-five-acts--light .m-five-acts__caption,
.m-five-acts--light .m-five-acts__name { color: var(--burgundy); }
.m-five-acts--light .m-five-acts__caption em,
.m-five-acts--light .m-five-acts__roman,
.m-five-acts--light .m-five-acts__sessions { color: var(--gold-deep); }
.m-five-acts--light .m-five-acts__phase,
.m-five-acts--light .m-five-acts__foot { color: var(--ink-soft); }
.m-five-acts--light .m-five-acts__vitruvian { mix-blend-mode: multiply; opacity: 0.6; }

/* ── Mobile: stack labels + tighter aspect */
@media (max-width: 760px) {
  .m-five-acts__stage { aspect-ratio: 1200 / 900; }
  .m-five-acts__node { width: 90px; }
  .m-five-acts__roman { font-size: 22px; }
  .m-five-acts__name { font-size: 14px; }
  .m-five-acts__phase, .m-five-acts__sessions { font-size: 9px; }
}