:root {
  --paper: #f5f2e9;
  --ink: #283127;
  --muted: #687064;
  --line: #d9d9ca;
  --accent: #a54d32;
  --wash: #e9ebdf;
  --q-primary: #a54d32;
  --q-secondary: #516553;
}
* { box-sizing: border-box; }
body, .q-page { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 15px; }
.q-page { min-height: 100vh; }
.nicegui-content { padding: 0; }
.atlas { width: min(1600px, 100%); margin: auto; padding: 0 4.5vw; }
.top-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 34px;
  grid-template-areas: "head card" "intro card" "question card"; align-items: start;
  padding-bottom: 4px; }
.top-band-main { display: contents; }
.masthead { grid-area: head; display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.masthead-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.masthead-logo { width: 104px; flex: none; }
.masthead-logo img { object-fit: contain; }
.masthead-copy { display: flex; flex-direction: column; min-width: 0; }
.masthead-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-start; }
.eyebrow { font-size: 11px; letter-spacing: .13em; line-height: 1.6; text-transform: uppercase;
  font-weight: 600; color: var(--muted); }
.wordmark { font: 26px/1.18 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.wordmark-subtitle { font-family: Georgia, "Times New Roman", serif; font-size: 13px;
  font-style: italic; line-height: 1.4; color: var(--muted); padding-top: 3px; }
.mode-pill { border: 1px solid #bdc5b6; border-radius: 30px; padding: 7px 13px;
  font-size: 12px; color: #455641; background: #edf0e7; white-space: nowrap; }
.contact-card { grid-area: card; display: flex; align-items: center; gap: 18px;
  margin-top: 10px; padding: 18px 18px 20px; border: 1px solid #c9d0bd;
  border-left: 3px solid var(--accent);
  border-radius: 6px; background: #fbfaf4; box-shadow: 0 1px 0 #00000008; align-self: start; }
.contact-copy { display: flex; flex-direction: column; gap: 4px; }
.contact-title { font: 18px/1.3 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.contact-person { font-size: 14px; font-weight: 600; }
.contact-hint { font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 20ch; }
.contact-qr { width: clamp(156px, 9.5vw, 180px); flex: none; background: #fff; border-radius: 3px;
  padding: 10px 8px 8px; box-shadow: inset 0 0 0 1px #e6e6da; }
.contact-qr-image { width: 100%; }
/* Keep module edges crisp when the QR is scaled down; smoothing breaks scanning. */
.contact-qr-image img { image-rendering: pixelated; }
.intro-row { grid-area: intro; display: flex; justify-content: space-between; align-items: end;
  gap: 16px 20px; padding: 12px 0; flex-wrap: wrap; }
.intro-copy { gap: 9px; flex: 1 1 260px; }
.page-title { font: clamp(25px, 1.75vw, 29px)/1.12 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em; max-width: 720px; }
.intro-description { color: var(--muted); font-size: 16px; }
.show-buttons { gap: 5px; justify-content: flex-end; max-width: 620px; flex-wrap: wrap; }
.atlas-button { border-radius: 4px; min-height: 44px; letter-spacing: 0; font-size: 13px;
  box-shadow: none; }
.atlas-button.q-btn--flat { color: var(--ink) !important; }
.atlas-button:hover { background-image: linear-gradient(#00000005, #00000005); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: 3px solid #788765 !important; outline-offset: 4px; }
.question-section { grid-area: question; padding: 12px 18px 10px; background: #eeeee3;
  border: 1px solid var(--line); border-radius: 5px; }
.question-row { width: 100%; align-items: stretch; gap: 12px; padding-top: 9px; }
.question-row > .atlas-button { min-width: 155px; }
.question-input { flex: 1; min-width: 240px; background: #faf9f4; }
.question-input input { font-size: 18px; }
.current-question { margin: 10px 0; font-family: Georgia, serif; font-size: 17px; }
.scope-controls { align-items: center; gap: 9px; margin-top: 13px; }
.theme-input { width: 215px; }
.year-input { width: 135px; }
.scope-summary { color: var(--muted); font-size: 12px; line-height: 1.6; padding-top: 8px; }
.error-text, .error-banner { color: #9d3629; }
.error-banner { background: #f4e5dc; padding: 12px 16px; border-left: 3px solid var(--accent); }
.error-text:empty, .service-status:empty { display: none; }
.view-tabs { margin-top: 8px; border-bottom: 1px solid var(--line); }
.view-tabs .q-tab { text-transform: none; font-size: 15px; min-height: 45px; padding: 0 25px; }
.view-tabs .q-tab--active { color: var(--accent); }
.view-heading { align-items: center; gap: 10px; padding: 2px 0 0; }
.view-heading > .eyebrow { flex: 1; }
.show-region { width: 100%; gap: 8px; padding-top: 6px; }
.show-region .q-expansion-item__container { border-bottom: 1px solid var(--line); }
.chapter-controls { gap: 2px; }
.chapter-controls button { font-size: 12px; }
.chapter-title { font-family: Georgia, serif; font-size: 22px; }
.current-insight { align-items: center; width: 100%; gap: 10px; flex-wrap: wrap; }
.chapter-progress-group { align-items: center; gap: 6px; flex: none; }
.chapter-progress { flex: none; }
.chapter-progress-label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.show-callout { font-size: 16px; flex: 1; min-width: 220px; }
.idle-warning { background: #f0ddad; padding: 13px; width: 100%; border-radius: 4px; }
.service-status { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.provenance { color: var(--accent); font-size: 12px; font-weight: 600; margin: 2px 0; }
.view-content { width: 100%; gap: 0; padding-bottom: 45px; }
.section-title { font: clamp(25px, 2vw, 33px)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em; }
.mechanism { font-size: 12px; color: var(--muted); margin: 0; }
.caption { font-size: 12px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); line-height: 1.65; }
.search-layout, .answer-layout, .graph-layout { display: grid; width: 100%; gap: 34px;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 1fr); margin-top: 14px; }
.meaning-panel, .matching-panel, .answer-panel, .evidence-panel, .graph-panel, .timeline-panel {
  min-width: 0; gap: 13px; }
.meaning-panel { gap: 8px; }
.meaning-map { height: 320px; width: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at center, #e5e9d9 0, #eeeee2 55%, transparent 72%); }
.map-legend { display: grid; width: 100%; gap: 8px 24px; padding: 13px 15px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 1px solid var(--line); border-radius: 5px; background: #faf9f3; }
.legend-entry { display: flex; align-items: start; gap: 9px; }
.legend-swatch { display: flex; flex: 0 0 auto; align-items: center; height: 38px; }
.legend-swatch svg { display: block; }
.legend-copy { display: flex; flex-direction: column; gap: 1px; }
.legend-name { font-size: 12px; font-weight: 600; line-height: 1.5; }
.legend-detail { font-size: 12px; line-height: 1.55; color: var(--muted); }
/* Only the mark is dimmed: explanatory text keeps its readable contrast. */
.legend-absent .legend-swatch { opacity: .4; }
.legend-absent .legend-name { font-weight: 500; color: var(--muted); }
.legend-caveat { grid-column: 1 / -1; margin: 0; padding-top: 9px; font-size: 12px;
  line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); }
.featured-image-button { width: 100%; padding: 0; background: #e9e7dd; border-radius: 5px; }
.featured-image-button .q-btn__content { width: 100%; }
.featured-photo { height: 255px; width: 100%; }
.featured-photo img { mix-blend-mode: multiply; }
.focus-card { width: 100%; gap: 4px; }
.focus-title { font: 25px/1.15 Georgia, serif; letter-spacing: -.02em; padding-top: 6px; }
.focus-date { font-size: 14px; color: var(--muted); }
.focus-card .atlas-button { min-height: 36px; padding-left: 0; }
.result-heading { margin-top: 14px; font-size: 23px; }
.evidence-panel .featured-photo { height: 205px; }
.timeline-panel .featured-photo { height: 175px; }
.map-pending { padding: 40px; min-height: 230px; background: var(--wash);
  font: 24px/1.5 Georgia, serif; border-radius: 5px; }
.passage-card { width: 100%; padding: 18px 19px; gap: 8px; border: 1px solid var(--line);
  border-radius: 4px; background: #faf9f3; line-height: 1.6; }
.result-title { font-size: 15px; font-weight: 600; line-height: 1.45; }
.passage-card .q-btn { margin-left: -10px; }
.object-grid-title { margin: 35px 0 20px; }
.object-grid { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 27px; }
.object-card { width: 100%; overflow: hidden; gap: 0; border: 1px solid var(--line);
  border-radius: 5px; background: #faf9f3; }
.image-button { width: 100%; padding: 0; border-radius: 0; background: #e8e6db; }
.image-button .q-btn__content { width: 100%; }
.object-photo { width: 100%; height: 280px; }
.object-photo img { mix-blend-mode: multiply; }
.object-copy { width: 100%; padding: 20px; gap: 7px; }
.object-title { font: 25px/1.15 Georgia, serif; letter-spacing: -.02em; }
.card-actions { gap: 0; margin-left: -10px; }
.selection-bar { gap: 5px; align-items: center; background: #e7eadd; border-radius: 4px;
  width: 100%; padding: 5px 10px; margin-top: 8px; }
.selection-bar:empty { display: none; }
.answer-panel { padding: 24px; background: #e9ecdf; border-radius: 5px; }
.answer-text { font: 23px/1.55 Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-statement { gap: 4px; border-bottom: 1px solid #cdd2be; padding: 4px 0 15px;
  width: 100%; }
.source-text { font-size: 15px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.limitation, .stale-label { border-left: 3px solid var(--accent); padding: 13px 16px;
  background: #f3eadd; line-height: 1.7; }
.stale-label { font-weight: 600; }
.relationship-map { width: 100%; height: 420px; background: #eeeee4; border-radius: 6px; }
.network-list .q-expansion-item__content { display: flex; flex-direction: column; align-items: start; }
.network-list button { text-align: left; }
.timeline-panel { padding: 22px; background: #e9ecdf; border-radius: 5px; }
.time-toggle { max-width: 100%; }
.time-toggle button { font-size: 12px; }
.event-detail { width: 100%; }
.event-card { width: 100%; border-left: 2px solid #c1c7b2; padding: 12px 16px; gap: 7px; }
.current-event { border-left: 3px solid var(--accent); background: #faf9f3; border-radius: 3px; }
.empty-state { padding: 25px 0; color: var(--muted); }
.empty-collection { width: 100%; padding: 60px 35px; margin: 25px 0; max-width: 900px;
  background: #e9ecdf; border-radius: 6px; line-height: 1.8; }
.atlas-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 30px;
  color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.footer-note { font-family: Georgia, serif; font-size: 16px; }
.footer-credits { align-items: flex-end; gap: 3px; text-align: right; }
.footer-credit { color: var(--muted); font-size: 11px; line-height: 1.6; }
a.footer-credit { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
a.footer-credit:hover { color: var(--accent); }
.detail-dialog { width: min(1100px, 94vw); max-width: 1100px !important; background: var(--paper);
  padding: 28px; border-radius: 7px; }
.source-dialog { width: min(760px, 94vw); max-width: 760px !important; background: var(--paper);
  padding: 30px; gap: 18px; border-radius: 7px; }
.dialog-heading { justify-content: space-between; align-items: center; width: 100%; }
.object-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
.detail-photo { height: 470px; width: 100%; background: #e9e7dd; }
.detail-copy { gap: 13px; }
.date-label { font: 21px Georgia, serif; color: var(--muted); }
.metadata { color: var(--muted); font-size: 13px; line-height: 1.7; }
.source-link, a { color: #86432d; text-underline-offset: 3px; }
.highlighted-passage { border-left: 2px solid #c0c7b6; margin: 0; padding-left: 18px; }
.inline-text, .highlighted-passage mark { display: inline; }
mark { background: #edda99; color: var(--ink); }
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 30px;
  background: radial-gradient(ellipse at 15% 20%, #e0e6d4, #f5f2e9 65%); }
.login-card { max-width: 520px; width: 100%; padding: 45px; border: 1px solid var(--line);
  background: #faf9f3; border-radius: 6px; }
.login-card h1 { font: clamp(28px, 5.2vw, 38px)/1.15 Georgia, serif; letter-spacing: -.04em;
  margin: 18px 0; text-wrap: balance; }
.login-logo { width: 132px; display: block; }
.login-intro { font: 28px/1.25 Georgia, serif; }
.login-card p { line-height: 1.65; }
.login-card label { display: block; font-size: 13px; margin-top: 30px; margin-bottom: 9px; }
.login-card input { width: 100%; border: 1px solid #aeb5a4; background: white; border-radius: 3px;
  padding: 13px; font-size: 19px; }
.login-card button { width: 100%; background: var(--accent); color: #fff; border: 0;
  border-radius: 3px; padding: 14px 20px; font-size: 16px; cursor: pointer; }
.login-card button span { float: right; }
#login-message { font-size: 13px; color: #9d3629; }
@media (min-width: 1500px) { .object-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .top-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card"
    "intro" "question"; row-gap: 12px; }
  .contact-card { justify-self: start; padding: 14px 16px 16px; gap: 14px; }
  .contact-qr { width: 152px; }
}
@media (max-width: 1050px) {
  .atlas { padding: 0 25px; }
  .masthead { flex-wrap: wrap; gap: 12px; }
  .intro-row { align-items: center; gap: 12px 16px; padding: 14px 0; }
  .show-buttons { justify-content: flex-end; max-width: none; flex: 0 1 auto; }
  .search-layout, .answer-layout, .graph-layout { gap: 23px;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr); }
  .object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .atlas { padding: 0 16px; }
  .top-band { row-gap: 12px; }
  .masthead { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 0; }
  .masthead-identity { gap: 12px; align-items: start; }
  .masthead-logo { width: 78px; }
  .masthead-tools { gap: 4px; }
  .masthead > .q-row { flex-wrap: wrap; gap: 5px; }
  .contact-card { justify-self: start; padding: 14px 14px 16px; gap: 12px; }
  .contact-qr { width: 140px; }
  .contact-title { font-size: 16px; }
  .contact-hint { display: none; }
  .intro-row { padding: 18px 0 16px; flex-direction: column; align-items: start; }
  .intro-copy { flex: none; }
  .show-buttons { justify-content: flex-start; max-width: none; }
  .page-title { font-size: 34px; }
  .question-section { padding: 18px 14px; }
  .question-input { min-width: 100%; }
  .question-row > .atlas-button { width: 100%; }
  .scope-controls { gap: 8px; }
  .theme-input { width: 100%; }
  .year-input { flex: 1; min-width: 110px; }
  .view-tabs .q-tab { padding: 0 12px; min-width: 155px; }
  .view-tabs .q-tab__label { font-size: 13px; }
  .view-heading { flex-wrap: wrap; }
  .view-heading > .eyebrow { flex-basis: 100%; }
  .search-layout, .answer-layout, .graph-layout, .object-detail-layout { grid-template-columns: 1fr; }
  .search-layout .matching-panel { grid-row: 1; }
  .meaning-map { height: 280px; }
  .object-photo { height: 210px; }
  .object-copy { padding: 15px; }
  .object-title { font-size: 22px; }
  .card-actions { flex-direction: column; align-items: start; }
  .relationship-map { height: 330px; }
  .answer-text { font-size: 21px; }
  .detail-photo { height: 310px; }
  .detail-dialog, .source-dialog { padding: 20px; }
  .atlas-footer { flex-direction: column; gap: 8px; }
  .footer-credits { align-items: flex-start; text-align: left; }
  .login-card { padding: 28px; }
}
@media (max-width: 430px) { .object-grid { grid-template-columns: 1fr; } .object-photo { height: 270px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important;
  transition-duration: 0s !important; scroll-behavior: auto !important; } }