* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202c31; background: #fafbf9; line-height: 1.55; }
body { margin: 0; } button, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; }
[hidden] { display: none !important; }
main { max-width: 1800px; padding: 32px clamp(16px, 3vw, 56px) 48px; margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } h1 { font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.035em; line-height: 1.2; margin: 0 0 12px; font-weight: 650; } header p { margin: 0; color: #596469; font-size: 15px; }
button { color: inherit; background: transparent; border: 1px solid #aeb9b8; border-radius: 3px; padding: 7px 12px; } button:hover { background: #eaf0ee; }
:focus-visible { outline: 3px solid #0069aa; outline-offset: 4px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.layout.has-selection { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.architecture { min-width: 0; }
.image-stage { position: relative; width: 100%; isolation: isolate; }
#architecture-image { display: block; width: 100%; height: auto; }
.missing-image { width: 100%; min-width: 0; aspect-ratio: 16 / 10; border: 1px dashed #aeb9b8; background: #f0f2ef; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: #596469; }
.missing-image strong { font-size: clamp(16px, 2vw, 25px); color: #364347; }.missing-image span { max-width: min(100%, 550px); font-size: 14px; } code { overflow-wrap: anywhere; }
#hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; padding: 0; border: 2px solid transparent; border-radius: 3px; background: transparent; }
.hotspot:focus-visible { background: rgb(42 94 103 / 9%); border-color: #427681; }
.hotspot:focus-visible { outline: 3px solid #0069aa; outline-offset: 2px; }
.hotspot-label { display: none; }
.development .hotspot { border: 2px dashed #a04c13; background: rgb(195 120 62 / 7%); }
.development .hotspot-label { display: block; background: #fff9ef; color: #67340d; font: 11px/1.4 ui-monospace, monospace; overflow-wrap: anywhere; text-align: left; padding: 3px; position: absolute; top: 0; left: 0; max-width: 100%; }
.development .hotspot[aria-pressed="true"] { border-style: solid; border-color: #0069aa; }
.topic-index { border-top: 1px solid #d5dcda; margin-top: 26px; padding-top: 16px; } h2 { font-size: 23px; line-height: 1.3; margin: 12px 0 20px; } .topic-index h2 { font-size: 14px; color: #596469; font-weight: 600; margin: 0 0 12px; }
#topic-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; }
a { color: #285d68; text-decoration-thickness: 1px; text-underline-offset: 3px; } #topic-links a { font-size: 14px; padding: 4px 0; } a[aria-current="true"] { font-weight: 700; }
#detail-panel { border-left: 1px solid #cfd8d5; padding-left: 26px; overflow-wrap: anywhere; } #close-panel { display: block; margin-left: auto; font-size: 14px; }
#detail-panel p { font-size: 15px; margin: 0 0 22px; } h3 { font-size: 13px; font-weight: 700; margin: 24px 0 8px; } .distinction { border-left: 3px solid #66858a; padding-left: 15px; } #related-topics { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
#tooltip { position: fixed; z-index: 10; width: max-content; max-width: min(290px, calc(100vw - 24px)); padding: 12px 14px; border: 1px solid #b7c5c3; background: #fff; font-size: 13px; pointer-events: none; box-shadow: 0 2px 8px #20353b12; } #tooltip strong, #tooltip span { display: block; } #tooltip strong { margin-bottom: 5px; }
#dev-panel { border-top: 1px solid #b5bdbc; margin-top: 32px; padding-top: 16px; } #dev-panel h2 { font-size: 18px; } #dev-panel p, #dev-panel label { font-size: 14px; } textarea { display: block; width: min(100%, 500px); margin-top: 8px; padding: 10px; font-family: ui-monospace, monospace; }
@media (max-width: 1000px) { .layout.has-selection { grid-template-columns: minmax(0, 1fr); } #detail-panel { border-left: 0; border-top: 1px solid #cfd8d5; padding: 20px 0 0; } #topic-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { main { padding-top: 22px; } header { align-items: flex-start; gap: 12px; } header button { font-size: 13px; padding: 6px 9px; } .missing-image { min-height: 260px; padding: 18px; } .topic-index { margin-top: 20px; } }


#breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; }
#breadcrumbs button { padding: 3px 8px; }
#focus-context { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
#focus-context h2 { margin: 0 0 6px; } #focus-context p { margin: 0; font-size: 14px; color: #596469; }
#locator { position: relative; flex: 0 0 170px; width: 170px; padding: 0; border: 1px solid #bac5c2; border-radius: 0; }
#locator img { width: 100%; display: block; }
#locator-region { position: absolute; border: 2px solid #007d87; background: rgb(0 125 135 / 12%); pointer-events: none; }
.image-stage.focused { overflow: hidden; }
.image-stage.focused #architecture-image { position: absolute; max-width: none; height: auto; }
.focused .hotspot:focus-visible { outline-offset: -4px; }
@media (max-width: 480px) { #locator { flex-basis: 100px; width: 100px; } #focus-context h2 { font-size: 19px; } }



.image-stage.focused { margin-inline: auto; }

/* Hover is transient; selecting a topic must not leave a rectangle behind. */
.hotspot:hover:not(:focus-visible) { background: transparent; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .hotspot:hover { background: rgb(42 94 103 / 9%); border-color: #427681; }
  .hotspot:hover:not(:focus-visible) { background: rgb(42 94 103 / 9%); border-color: #427681; }
}
.development .hotspot:hover:not(:focus-visible) { border-color: #a04c13; background: rgb(195 120 62 / 7%); }
.development .hotspot[aria-pressed="true"]:hover { border-color: #0069aa; }

/* Optional analytical layers retain the publication's existing layout. */
.moment-controls { border-top: 1px solid #d5dcda; padding-top: 14px; margin-bottom: 24px; font-size: 14px; }
.moment-controls label { margin-right: 12px; font-weight: 600; }
select { font: inherit; color: inherit; background: #fafbf9; border: 1px solid #aeb9b8; border-radius: 3px; padding: 7px; max-width: 100%; }
#moment-status { color: #596469; margin: 9px 0; max-width: 950px; }
details { border-top: 1px solid #d5dcda; padding: 12px 0; }
summary { cursor: pointer; color: #285d68; font-size: 14px; font-weight: 600; }
#moment-context { max-width: 900px; }
#moment-description { columns: 2; column-gap: 32px; }
#moment-description h3 { break-after: avoid; }
#moment-description p { margin-top: 0; }
#claim-content, #relationship-list { font-size: 14px; }
#claim-content ul, #relationship-list ul { padding-left: 19px; }
#claim-content li, #relationship-list li { margin-bottom: 9px; }
#relationship-section { border-top: 1px solid #d5dcda; padding-top: 12px; margin-top: 8px; }
#relationship-toggle { font-size: 14px; }
.component-moment { border-left: 3px solid #147d83; padding-left: 15px; }
.analytical-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.overlay-caption { color: #596469; font-size: 12px; margin: 12px 0 0; }
@media (max-width: 600px) { .moment-controls label { display: block; margin-bottom: 8px; } #moment-description { columns: 1; } }

#component-closeup { margin: 20px 0; }
#closeup-image { position: relative; overflow: hidden; width: 100%; margin: auto; }
#closeup-image img { position: absolute; max-width: none; height: auto; }
#closeup-caption { font-size: 12px; color: #596469; margin-top: 10px; text-align: center; }
#relationship-map { border-top: 1px solid #cfd8d5; margin-top: 24px; padding-top: 12px; }
#relationship-heading { font-size: 18px; margin: 0 0 12px; }
#relationship-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
#relationship-list h3 { margin-top: 0; }
#emphasis-index { margin-top: 16px; }
#emphasis-index h2 { font-size: 14px; color: #596469; margin: 0 0 8px; }
#emphasis-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
#detail-panel .distinction { margin: 0 0 20px; }
#detail-panel .distinction p { font-size: 17px; font-weight: 600; }
.component-moment h3 { margin-top: 12px; }
@media(max-width:600px) { #relationship-list { grid-template-columns: 1fr; gap: 12px; } }

#prominent-components { margin: 20px 0; }
#prominent-title { font-size: 16px; margin: 0 0 10px; }
#prominent-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#prominent-buttons button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 44px; padding: 14px; text-align: left; border: 1px solid #9aadaa; background: #fff; }
#prominent-buttons strong, #prominent-buttons span { display: block; }
#prominent-buttons strong { font-size: 14px; color: #285d68; }
#prominent-buttons span { margin-top: 7px; font-size: 13px; line-height: 1.5; }
#prominent-buttons button:hover, #prominent-buttons button:focus-visible { background: #edf4f2; border-color: #427681; }
#prominent-buttons button[aria-pressed="true"] { border-color: #285d68; box-shadow: inset 0 3px #285d68; }
#linked-highlight { position: absolute; pointer-events: none; border: 2px solid #0069aa; background: rgb(0 105 170 / 12%); outline: 2px solid white; z-index: 2; }
@media (max-width: 600px) { #prominent-buttons { grid-template-columns: 1fr; } }

#prominent-buttons:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width:600px) { #prominent-buttons:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }

/* Optional economic lens: existing graphic and detail panel, no permanent overlay. */
#economic-toggle { margin-left: 16px; min-height: 44px; }
#economic-toggle[aria-pressed="true"], .economic-choices button[aria-pressed="true"] { background: #285d68; color: white; border-color: #285d68; }
#economic-toggle[aria-pressed="true"]::before { content: "✓ "; }
#economic-status, .economic-context { color: #285d68; font-size: 14px; }
#economic-cases { border-top: 1px solid #d5dcda; padding: 12px 0 24px; }
#economic-cases h2 { font-size: 18px; }
#economic-cases nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
#economic-cases a { display: inline-block; padding: 10px 0; }
#economic-panel { border-top: 2px solid #427681; margin-top: 20px; }
.economic-choices { display: flex; flex-direction: column; gap: 8px; }
.economic-choices button { min-height: 44px; text-align: left; white-space: normal; }
#economic-implication { border-left: 3px solid #147d83; padding-left: 14px; margin: 18px 0; }
#economic-implication:focus { outline: 2px solid #427681; outline-offset: 5px; }
.economic-source { font-size: 13px; color: #596469; }
@media(max-width: 800px) { #economic-toggle { display: block; margin: 12px 0 0; } }

.economic-path { font-size: 13px; color: #285d68; border-left: 3px solid #427681; padding-left: 10px; margin-bottom: 14px; }
.economic-parties { font-size: 14px; border-block: 1px solid #d5dcda; padding: 12px 0; }
.economic-parties dt { font-weight: 600; margin-top: 8px; }
.economic-parties dd { margin: 2px 0 10px; }

/* Lead with the changing interpretation; supporting context stays available below. */
#economic-panel { margin-top: 0; }
#economic-panel > h3 { margin: 12px 0 4px; }
.economic-context { margin: 0 0 12px; }
.economic-moment { background: #edf5f3; border-left: 3px solid #147d83; padding: 10px 14px; margin-bottom: 16px; }
.economic-moment h3 { margin: 0 0 6px; font-size: 16px; }
.economic-moment p { margin: 0; }
#economic-panel > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#economic-relationship { width: 100%; min-height: 44px; font: inherit; font-size: 14px; color: #285d68; background: white; border: 1px solid #819c9e; border-radius: 3px; padding: 8px; }
#economic-implication h3:first-child { margin-top: 0; }

/* Compact controls keep the architecture and its interpretation in the first screen. */
main { padding-top: 16px; }
header { margin-bottom: 12px; gap: 12px; }
h1 { font-size: 25px; margin-bottom: 3px; }
header p { font-size: 13px; }
.moment-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; margin-bottom: 12px; border-bottom: 1px solid #d5dcda; }
.moment-controls label { margin: 0; }
#economic-toggle { margin: 0; }
#moment-context { border: 0; padding: 0; max-width: none; }
#moment-context[open] { flex-basis: 100%; padding: 8px 0; }
#moment-description { max-width: 950px; }
#economic-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#breadcrumbs { margin-bottom: 12px; font-size: 13px; gap: 6px; }
#focus-context { margin-bottom: 10px; min-height: 44px; }
#focus-context h2 { font-size: 20px; margin: 0; }
#focus-context p { font-size: 13px; }
#locator { flex-basis: 96px; width: 96px; }
#close-panel { float: right; margin: 0 0 8px 12px; }
#detail-title { margin: 0 0 12px; font-size: 22px; min-height: 38px; }
#economic-panel { clear: both; }
#detail-panel .economic-context { margin-bottom: 10px; font-size: 13px; }
#detail-panel .economic-moment p { margin-bottom: 0; }
.economic-moment { margin-bottom: 12px; }
#economic-implication { margin-top: 12px; }
@media(min-width: 1001px) {
 .layout.has-selection { grid-template-columns: minmax(0, 1fr) minmax(380px, 40%); gap: 24px; }
 #detail-panel { padding-left: 22px; }
}
@media(max-width: 600px) {
 main { padding-top: 12px; }
 h1 { font-size: 22px; }
 .moment-controls label { flex-basis: 100%; margin: 0; }
 #moment-select { flex: 1; min-width: 0; }
 #economic-toggle { display: inline-block; font-size: 13px; }
 #moment-description { columns: 1; }
}