/* Compare-only editorial structure. Shared site and other pages stay unchanged. */
.compare-v3 .compare-intro { max-width: 72rem; }
.compare-v3 .compare-intro .subpage-title { max-width: 22ch; }
.compare-jumps { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 2rem; }
.compare-jumps a { text-underline-offset: 0.25em; }
.compare-label { color: var(--violet); text-transform: uppercase; font-size: var(--type-meta); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.compare-v3 .section > p, .compare-v3 .compare-chapter > p { max-width: 74ch; }
.compare-setup { margin-top: 2rem; }
.compare-art { margin: 2rem 0 1rem; }
.compare-art-scroll img { display: block; width: 100%; height: auto; }
.compare-art-scroll a { display: block; }
.compare-explanations, .compare-fit-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin: 2rem 0; }
.compare-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.compare-explanations > div, .compare-fit-details > div { min-width: 0; }
.compare-explanations > div + div, .compare-fit-details > div + div { border-left: 1px solid var(--rule); padding-left: 2rem; }
.compare-explanations h3, .compare-fit-details h3 { margin-top: 0; }
.compare-explanations p:last-child, .compare-fit-details p:last-child { margin-bottom: 0; }
.compare-query { border-block: 1px solid var(--rule); padding-block: 1.5rem; margin: 2.5rem 0; }
.compare-query h3 { margin-top: 0; }
.compare-query p { max-width: 74ch; }
.query-example { color: var(--teal); font-style: italic; }
.compare-chapter { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.compare-v3 .compare-chapter > h2 { max-width: 34ch; }
.compare-rule { background: var(--paper-2); padding: 1rem 1.25rem; max-width: 100%; overflow-x: auto; font-size: var(--type-meta); }
.compare-rule:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
.fit-options { border-block: 1px solid var(--rule); padding-block: 2rem; }
.compare-status { margin-top: 2rem; }
.compare-invitation .compare-close-links { align-items: center; }
.compare-invitation .button { display: inline-block; background: var(--ink); color: var(--paper); padding: 0.8rem 1.2rem; font-weight: 700; text-decoration: none; }
.compare-invitation .button:hover { background: var(--violet); }
@media (max-width: 899px) {
 .compare-explanations, .compare-fit-details { grid-template-columns: 1fr; gap: 1.5rem; }
 .compare-explanations > div + div, .compare-fit-details > div + div { border-left: 0; border-top: 1px solid var(--rule); padding: 1.5rem 0 0; }
 .compare-art-scroll img { min-width: 1050px; max-width: none; }
 .compare-art-scroll::after { content: 'Scroll sideways to inspect the diagram →'; display: block; margin-top: 0.5rem; font-size: var(--type-meta); color: var(--ink-2); }
 .compare-chapter { margin-top: 3rem; padding-top: 2rem; }
 .compare-rule { font-size: 0.875rem; }
}

/* V4: one Temporal narrative, with three distinct chapters and its own FAQ. */
.temporal-comparison { padding-bottom: 3rem; }
.temporal-comparison > .section { padding-bottom: 0; border-bottom: 0; }
.temporal-comparison .compare-chapter { margin-top: 3rem; padding-top: 2.5rem; }
.temporal-comparison .temporal-summary, .temporal-comparison .temporal-faq { margin-top: 2rem; padding-top: 2rem; }
.temporal-comparison h2 { max-width: 34ch; }
.temporal-comparison > section > p { max-width: 74ch; }
.compare-v3 .choreograph-heading, .compare-v3 .choreograph-name { color: var(--teal); }
.authority-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; margin: 2rem 0; }
.authority-cards > div { background: var(--paper-2); padding: 1.5rem; }
.authority-cards h3 { color: var(--teal); margin-top: 0; }
.authority-cards p { margin-bottom: 0; }
@media (max-width: 899px) {
 .authority-cards { grid-template-columns: 1fr; }
 .temporal-comparison { padding-bottom: 2rem; }
}

/* Figure 7 uses the site's actual type and colour roles, rather than raster type. */
.control-comparison { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1rem; }
.control-panel { min-width: 0; padding: 1.25rem; border: 1px solid var(--rule-strong); background: var(--paper-2); }
.control-panel > h3 { display: flex; align-items: center; gap: 0.5rem; min-height: 4rem; margin: 0 0 1.25rem; font: 700 var(--type-subsection)/1.3 var(--text); text-wrap: balance; }
.control-panel > h3 img { width: 3rem; height: auto; flex-shrink: 0; }
.control-task > h3 { color: var(--teal); }
.control-rule { display: flex; flex-direction: column; justify-content: center; min-height: 12rem; padding: 1rem; border: 1px solid var(--rule-strong); background: var(--paper); }
.control-rule h4 { margin: 0 0 0.75rem; font: 700 var(--type-body)/1.4 var(--text); }
.control-panel p { font: 400 var(--type-body)/1.55 var(--text); }
.control-rule p { margin: 0; }
.control-rule pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.control-rule code { font: 400 var(--type-code)/1.55 var(--mono); overflow-wrap: anywhere; }
.control-proposal { margin: 1rem 0; padding: 0.65rem 1rem; border: 1px solid var(--rule-strong); background: var(--paper); }
.control-panel .control-outcome { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; margin: 0; border: 1px solid currentColor; }
.control-outcome svg { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.control-refusal { color: var(--red); }
.control-success { color: var(--teal); }
.control-panel .control-explanation { margin: 1.5rem 0 0; }
.control-task .task-rule { min-height: auto; }
.control-branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.25rem; }
.control-branch { position: relative; min-width: 0; padding-top: 1rem; }
.control-branch::before { content: ''; position: absolute; height: 1.625rem; top: -0.625rem; left: 50%; border-left: 1px solid var(--teal); }
.control-price { text-align: center; font-variant-numeric: tabular-nums; margin: 0 0 1.25rem; padding: 0.5rem; border: 1px solid var(--rule-strong); background: var(--paper); }
.control-branch > p + p { position: relative; }
.control-branch > p + p::before { content: ''; position: absolute; height: 1.25rem; width: 0; bottom: 100%; left: 50%; border-left: 1px solid var(--ink-2); }
.control-branch > p + p::after { content: ''; position: absolute; width: 0.35rem; height: 0.35rem; top: -0.45rem; left: calc(50% - 0.175rem); border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); transform: rotate(45deg); }
.control-branch .control-review { margin: 1.25rem 0; padding: 0.65rem; text-align: center; border: 1px solid var(--rule-strong); background: var(--paper); }
.control-task .control-explanation { padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.control-record { display: block; margin-top: 0.25rem; color: var(--ink-2); font-size: var(--type-meta); }
@media (max-width: 1099px) {
 .control-comparison { grid-template-columns: 1fr; }
 .control-panel > h3 { min-height: 0; }
 .control-rule { min-height: 0; }
}

.control-branches::before { content: ''; position: absolute; top: 0.625rem; left: calc(25% - 0.25rem); right: calc(25% - 0.25rem); border-top: 1px solid var(--teal); }
.control-branches::after { content: ''; position: absolute; top: 0; left: 50%; height: 0.625rem; border-left: 1px solid var(--teal); }
@media (max-width: 599px) {
 .control-branch .control-outcome { flex-direction: column; align-items: flex-start; padding: 0.65rem; }
}