/* Field-guide figures: section leads, life-cycle plates, the sample-case lens. */
.section-lead { max-width: 64ch; margin: 4px 0 30px; font-size: 17.5px; line-height: 1.65; }

/* Original plates, two per phase, with matching column widths and baselines. */
.life-cycle { margin: 0 0 40px; }
.life-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.life-half { min-width: 0; }
.life-phase { display: grid; gap: 6px; margin: 0 0 20px; font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 400; color: var(--text); }
.life-phase small { font-family: var(--font); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.life-phase svg { display: block; width: 100%; height: 12px; overflow: visible; }
.life-phase.p2 { color: var(--risk); }
.life-pair { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: start; }
.life-step { --life-tag-row: 72px; display: grid; grid-template-rows: auto var(--life-tag-row) auto; justify-items: center; gap: 12px; min-width: 0; margin: 0; container-type: inline-size; }
.life-step img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.life-continuity { margin-top: 24px; text-align: center; font-size: 13px; color: var(--muted); }
.life-tag { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: fit-content; max-width: 100%; min-width: 0; min-height: 44px; padding: 6px 16px 6px 36px; font-family: var(--display); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.2; color: var(--text); }
.life-tag svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.life-arrow { align-self: stretch; display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 60px; }
.life-arrow svg { display: block; width: 32px; height: 24px; overflow: visible; color: var(--text); }
.life-arrow path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.life-desc { max-width: 24ch; margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); text-align: center; }


.life-tag { align-self: center; text-align: center; font-size: clamp(15px, 1.5vw, 20px); }
.life-tag span { min-width: 0; text-wrap: balance; }
/* Shrink the sticker only enough that "Discover/Establish" stays on one line. */
@container (max-width: 230px) {
  .life-tag { font-size: 15px; padding: 5px 8px 5px 30px; }
}
@container (max-width: 200px) {
  .life-tag { font-size: 13px; padding: 4px 8px 4px 30px; }
}
.life-arrow { padding-top: min(10vw, 120px); align-content: start; }
@media (max-width: 900px) {
  .life-halves { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .life-phase { font-size: 22px; }
}
@media (max-width: 420px) {
  .life-pair { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .life-arrow { padding-top: 0; min-height: 36px; align-content: center; }
  .life-arrow svg { transform: rotate(90deg); }
}

/* Lens: one scene drawn twice at the same scale; the lower layer shows only inside the lens circle. */
.lens-figure { margin: 0 0 34px; }
.lens-stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: var(--aspect, 1000 / 610); overflow: hidden; border: 1.5px solid var(--text); border-radius: 6px; background: #f8f1df; cursor: none; touch-action: pan-y; outline: none; container-type: inline-size; --lx: 40%; --ly: 40%; --lr: 140px; }
.lens-stage.is-tall { max-width: 520px; margin-inline: auto; }
.lens-stage:focus-visible { box-shadow: 0 0 0 3px var(--risk); }
.lens-layer { position: absolute; inset: 0; }
.lens-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lens-art .lens-share { font-family: var(--display); }
.lens-beneath { background: #f3dfcf; clip-path: circle(var(--lr) at var(--lx) var(--ly)); }
.lens-ring { position: absolute; left: 0; top: 0; width: calc(var(--lr) * 2); height: calc(var(--lr) * 2); border-radius: 50%; pointer-events: none; transform: translate(calc(var(--lx) - var(--lr)), calc(var(--ly) - var(--lr))); box-shadow: 0 0 0 2px var(--text), 0 0 0 6px rgba(248, 241, 223, .75), 0 0 0 7.5px var(--text), 0 12px 30px rgba(43, 36, 27, .22); }
.lens-ring::after { content: ""; position: absolute; right: 2%; bottom: -44px; width: 15px; height: 60px; border-radius: 6px; background: var(--text); transform: rotate(-45deg); transform-origin: top center; }
.lens-tag { position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% - 12px)); padding: 2px 10px; border-radius: 3px; background: var(--risk); color: #fbf6e8; font-family: var(--display); font-size: 15px; line-height: 1.3; white-space: nowrap; }
.lens-tag.is-below { top: 100%; transform: translate(-50%, 12px); }
.lens-title { position: absolute; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; text-align: center; white-space: nowrap; }
.lens-title strong { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2.7cqw, 28px); line-height: 1.1; }
.lens-title span { font-size: clamp(12.5px, 1.3cqw, 15px); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lens-title.harm strong { color: var(--risk); }
.lens-chip { position: absolute; transform: translateX(-50%); padding: 1px 8px; border: 1px solid var(--text); border-radius: 999px; background: #fbf6e8; font-size: clamp(12px, 1.3cqw, 14px); line-height: 1.35; white-space: nowrap; }
.lens-chip b { font-family: var(--display); font-weight: 400; margin-right: 4px; }
.lens-chip.harm { display: grid; justify-items: center; padding: 2px 10px; border-color: var(--risk); border-radius: 10px; color: var(--risk); }
.lens-pool-label { position: absolute; margin: 0; transform: translateX(-50%); font-size: clamp(12.5px, 1.3cqw, 15px); color: var(--muted); white-space: nowrap; }
.lens-pool-total { position: absolute; margin: 0; transform: translateX(-50%); display: flex; align-items: baseline; gap: 10px; color: var(--risk); font-size: clamp(12.5px, 1.3cqw, 15px); white-space: nowrap; }
.lens-pool-total strong { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 3cqw, 34px); line-height: 1; }
.lens-link { position: absolute; transform: translate(-50%, -50%); padding: 0 6px; border-radius: 3px; background: #f3dfcf; font-size: clamp(11.5px, 1.2cqw, 13.5px); line-height: 1.3; white-space: nowrap; }
.lens-link.above { transform: translate(-50%, -100%); }
.lens-link.below { transform: translate(-50%, 0); }
.lens-bubble { position: absolute; box-sizing: border-box; margin: 0; padding: .65em .85em; border: 1.5px solid var(--text); border-radius: 10px; background: #fbf6e8; font-size: clamp(11.5px, 1.32cqw, 14.5px); line-height: 1.38; color: var(--text); }
.lens-bubble small { display: block; margin-bottom: .3em; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lens-bubble.private { border-style: dashed; }
.lens-bubble::after { content: ""; position: absolute; bottom: -.7em; left: calc(var(--tail, 50%) - .7em); border: .7em solid transparent; border-bottom: 0; border-top-color: var(--text); }
.lens-bubble.is-centered { transform: translateY(-50%); }
.lens-bubble.is-beside::after { bottom: auto; top: calc(50% - .7em); left: -.7em; border: .7em solid transparent; border-left: 0; border-right-color: var(--text); }
.lens-bubble.is-beside:not(.is-centered)::after { top: auto; bottom: calc(var(--tail-y) - .7em); }
.lens-stage.is-tall .lens-title { width: 92%; white-space: normal; }
.lens-stage.is-tall .lens-title strong { font-size: clamp(20px, 5.4cqw, 28px); }
.lens-stage.is-tall .lens-title span,
.lens-stage.is-tall .lens-chip,
.lens-stage.is-tall .lens-pool-label { font-size: clamp(11px, 3cqw, 14px); }
.lens-stage.is-tall .lens-pool-total { display: grid; justify-items: center; gap: 2px; width: 92%; text-align: center; white-space: normal; font-size: clamp(11px, 3cqw, 14px); }
.lens-stage.is-tall .lens-pool-total strong { font-size: clamp(24px, 7cqw, 34px); }
.lens-stage.is-tall .lens-bubble { font-size: clamp(11px, 3.4cqw, 14px); }
.lens-hint { margin-top: 8px; font-size: 15px; font-style: italic; color: var(--muted); }

@media (max-width: 760px) {
  .lens-stage { cursor: crosshair; }
}
@media print {
  .lens-figure { display: none; }
}