/* Dr Non's Dao exhibition / 2026-10-02.
   One final, named cascade layer replaces mood effects, not earned content.
   Pair = reading identity; triple = study; quartet = bounded artifact.
   Exact source colours remain in fields. Reading uses accessible tint/shade.
   Layout starts with the phone; the only new breakpoint is 768px. */
:root {
  --display: 'Archivo Narrow', 'IBM Plex Sans Thai', 'Noto Sans SC', sans-serif;
  --body: 'Source Sans 3', 'IBM Plex Sans Thai', 'Noto Sans SC', sans-serif;
  --reader: var(--body);
  --paper: #f5f4ee;
  --bone: #e6e7db;
  --ink: #172c32;
  --ink-soft: #263e43;
  --ink-fade: #45595d;
  --ink-mute: #45595d;
  --seal: #82241f;
  --measure: 60ch;
  --sticky-stack: 0px !important;
}
html { scroll-padding-top: 76px; scroll-behavior: auto; scroll-snap-type: none; }
body { font-family: var(--body); background: var(--paper); background-image: none; }
body::before, body::after { content: none !important; }
body .cover::before, body .cover::after { content: none !important; }
body :is(button, input, textarea, select) { font-family: var(--body); }
body :is(button, a, summary):focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
body :is(button, summary) { touch-action: manipulation; }
body .topbar { height: 60px; background: var(--paper); border: 0; padding: 0 16px; gap: 12px; }
body .topbar-brand { border: 0; flex-shrink: 0; }
body .topbar-dao { font-size: 38px; }
body .topbar-name { font-family: var(--body); font-size: 13px; letter-spacing: 0; }
body .topbar .tool-btn { border: 0; min-height: 44px; }
body .topbar .tool-label { font-size: 14px; letter-spacing: 0; }
body .topbar.is-mobile-open .tool-label { display: inline; }
body .topbar.is-mobile-open .topbar-tools { background: var(--paper); }
body .topbar:not(.is-mobile-open) .topbar-brand { display: flex; }
body .topbar .topbar-name { display: none; }
body .topbar:not(.is-mobile-open) :is(.yin-toggle,.quiet-toggle,.pinyin-toggle,.deepwork-btn,.toolbar-explore-toggle) { display: none !important; }
body .topbar .mobile-menu-btn .mb-icon { font-family: var(--body); font-size: 16px; }
body .lang-pill { min-height: 44px; min-width: 36px; }
body .cover { display: grid; min-height: 0; padding: 60px 0 0; overflow: clip; background: #f5f4ee; color: #172c32; }
body .exhibition-entrance { padding: 40px 24px; background: #a7d4e4; color: #172c32; position: relative; }
.exhibition-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; margin: 0 0 32px; }
body .exhibition-entrance h2 { font-family: var(--display); font-size: clamp(64px, 13vw, 136px); line-height: .95; letter-spacing: -.035em; font-weight: 600; margin: 0 0 28px; }
body .exhibition-entrance > p:not(.exhibition-kicker) { font-size: 20px; line-height: 1.5; max-width: 36ch; margin: 0 0 28px; }
.entrance-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body .entrance-actions :is(a,button) { border: 0; background: #172c32; color: #fff; padding: 14px 18px; font-size: 16px; text-decoration: none; min-height: 48px; }
body .entrance-actions :is(a,button):not(:first-child) { background: transparent; color: #172c32; text-decoration: underline; text-underline-offset: 5px; }
body .cover-hero-media { width: 100%; margin: 0; border: 0; background: #82241f; padding: 24px; box-sizing: border-box; }
body .cover-hero-media img { width: 100%; height: auto; object-fit: contain; }
body .cover .cover-stack { display: grid; grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; }
body .cover .cover-cn-vertical { display: none; }
body .cover .cover-text { max-width: 60ch; }
body .cover .cover-title { font-family: var(--display); font-size: 48px; line-height: 1.1; }
body .cover :is(.cover-invite,.cover-sub) { font-family: var(--body); font-size: 17px; font-style: normal; line-height: 1.65; max-width: 60ch; }
body .cover .cover-promise { font-size: 22px; font-family: var(--display); color: #172c32; }
body .cover .cover-meta { padding: 20px 24px 0; border: 0; font-size: 11px; letter-spacing: .04em; }
body .cover .cover-foot { border: 0; padding: 0 24px 28px; margin: 0; }
body .cover .cover-instructions { font-size: 12px; letter-spacing: 0; border: 0; }
body .cover .cover-sub { max-height: none; overflow: visible; opacity: 1; }
body .cover .cover-promise { border: 0; padding: 0; font-style: normal; }
body .cover .cover-paths-btn { border: 0; font-size: 16px; }
body .cover :is(.cover-begin-btn,.cover-about-btn) { border: 0; min-height: 44px; font-family: var(--body); font-size: 16px; letter-spacing: 0; }
body .cover .cover-video-note { color: #45595d; font-size: 14px; }
body .exhibition-map { max-width: 1184px; margin: 0 auto; padding: 0 24px; }
body .exhibition-map > summary { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; min-height: 44px; font-size: 18px; cursor: pointer; list-style: none; }
body .exhibition-map .dao-map-host { padding: 0 0 28px; }
body .edition-note { border: 0; padding: 24px; font-size: 15px; }

/* The id deliberately outranks legacy mood + quiet-mode declarations. */
html body #chapters .chapter,
html body #chapters .chapter .panel {
  --paper: var(--room-ground);
  --bone: var(--room-ground);
  --ink: var(--room-ink) !important;
  --ink-soft: var(--room-ink) !important;
  --ink-fade: var(--room-ink) !important;
  --ink-mute: var(--room-ink) !important;
  --seal: var(--room-ink);
  background: var(--room-ground) !important;
  color: var(--room-ink) !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
}
html body #chapters .chapter { display: block; border: 0; padding: 0 0 48px; margin: 0; content-visibility: visible; contain-intrinsic-size: none; }
html body #chapters .chapter * { text-shadow: none !important; }
html body #chapters .chapter::before,
html body #chapters .chapter::after,
html body #chapters .panel::before,
html body #chapters .panel::after { content: none !important; }
html body #chapters .room-heading { background: var(--pair-field); color: var(--pair-ink); padding: 40px 24px; position: relative; overflow: hidden; }
html body #chapters .room-heading::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; background: var(--pair-companion); }
.room-number { font-family: var(--mono); font-size: 12px; margin: 0 0 24px; letter-spacing: .06em; }
html body #chapters .room-heading h2 { font-family: var(--display); font-size: clamp(44px, 8vw, 92px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; max-width: 19ch; margin: 0; color: inherit; }
.room-motive { font-size: 16px; margin: 24px 0 0; line-height: 1.6; }
html body #chapters .chapter-strip { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; padding: 16px 24px; background: var(--room-ground) !important; color: var(--room-ink) !important; border: 0; min-height: 0; }
html body #chapters .chapter-strip :is(.cs-en,.cs-th,.cs-route,.cs-num-py,.cs-cn-py,.cs-progress) { display: none; }
html body #chapters .chapter-strip .cs-cn { font-size: 28px; padding: 0; color: inherit; }
html body #chapters .chapter-strip .cs-num { font-size: 12px; letter-spacing: 0; color: inherit; }
html body #chapters .chapter-strip { position: static; backdrop-filter: none; }
html body #chapters .chapter-strip .cs-echo-btn { display: inline-flex; gap: 5px; min-height: 44px; min-width: 44px; border: 0; color: inherit; }
html body #chapters .cs-echo-copy { display: inline !important; font-size: 14px; font-family: var(--body); }
.room-navigation { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0 24px 24px; }
.room-navigation :is(a,button) { color: inherit; background: transparent; border: 0; padding: 10px 0; font-size: 16px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
html body #chapters .chapter .panel { padding: 32px 24px !important; min-height: 0 !important; border: 0 !important; }
html body #chapters .chapter .panel-summary { display: block !important; padding-top: 12px !important; }
html body #chapters .chapter :is(.summary-frame,.reading-frame,.reading-frame--top-aside,.origin-stack,.origin-head,.note-frame,.character-frame,.reflection-frame,.closer-frame) { max-width: 1184px; margin: 0 auto; }
html body #chapters .summary-frame { padding: 0; width: 100%; }
html body #chapters :is(.summary-frame,.insight-card,.origin-stack,.origin-head,.note-frame,.character-frame,.reflection-frame,.closer-frame) { color: var(--room-ink) !important; background: transparent !important; }
html body #chapters .summary-frame::before, html body #chapters .summary-frame::after { content: none !important; }
html body #chapters .summary-frame :is(.su-en,.su-th,.su-cn,.entry-hook) { padding: 0 !important; border: 0 !important; background: transparent !important; }
html body #chapters .summary-frame [data-lang] { margin-bottom: 0 !important; }
html body #chapters :is(.su-en,.su-th,.su-cn) { font-family: var(--body); font-size: clamp(24px, 3vw, 34px); font-weight: 600; font-style: normal; line-height: 1.45; max-width: 36ch; color: inherit !important; margin: 0; letter-spacing: 0; }
html body #chapters :is(.entry-hook,.su-cn-py) { font-size: 14px; line-height: 1.65; color: inherit !important; margin: 0 0 16px; }
html body #chapters .panel-label { max-width: 1184px; margin: 0 auto 20px; color: inherit !important; border: 0; font-family: var(--body); font-size: 14px; letter-spacing: 0; }
html body #chapters .panel-label * { color: inherit !important; }
html body #chapters .reading-frame { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 0; }
html body #chapters .reading-aside { position: static; width: auto; padding: 24px; background: var(--study-field) !important; color: var(--study-ink) !important; border: 0; }
html body #chapters .reading-aside p { color: inherit !important; font-family: var(--body); font-size: 17px; line-height: 1.6; text-transform: none; letter-spacing: 0; }
html body #chapters .reading-aside * { color: inherit !important; }
html body #chapters .reading-aside::before { content: ''; display: block; width: 44px; height: 8px; background: var(--study-second); margin-bottom: 20px; border-left: 22px solid var(--study-third); }
html body #chapters .insight-card { background: transparent !important; color: inherit; border: 0; padding: 0; min-width: 0; box-shadow: none; }
html body #chapters .insight-badge { color: inherit !important; background: transparent; font-family: var(--mono); font-size: 12px; }
html body #chapters .insight-badge * { color: inherit !important; }
html body #chapters .reading-body { max-width: 60ch; column-count: 1 !important; font-family: var(--body); font-size: 19px; line-height: 1.75; color: inherit !important; }
html body #chapters .rb-p { font-family: var(--body); font-size: inherit; line-height: inherit; color: inherit !important; letter-spacing: 0; }
html body #chapters .reading-pull { max-width: 1184px; padding: 0; margin: 0 auto 28px; border: 0; }
html body #chapters .rp-sentence { font-family: var(--display); font-size: 30px; line-height: 1.3; max-width: 32ch; color: inherit; }
html body #chapters .reading-signpost { border: 0; font-size: 13px; line-height: 1.7; color: inherit; }
html body #chapters .reading-flow > .artifact-cite { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 24px; margin: 32px 0; border: 0 !important; background: var(--artifact-field) !important; color: var(--artifact-ink) !important; max-width: 100%; }
html body #chapters .artifact-cite::before { content: ''; width: 72px; height: 12px; background: var(--artifact-second); border-left: 24px solid var(--artifact-third); border-right: 24px solid var(--artifact-fourth); }
html body #chapters .artifact-cite :is(.ac-subject,.ac-caption,.ac-source) { color: inherit !important; font-family: var(--body); line-height: 1.6; opacity: 1; }
html body #chapters .artifact-cite :is(.ac-subject,.ac-caption,.ac-source) * { color: inherit !important; }
html body #chapters .ac-subject { font-weight: 600; font-size: 22px; }
html body #chapters .ac-caption { font-size: 17px; }
html body #chapters .ac-source { font-size: 13px; margin-top: 14px; }
html body #chapters .artifact-cite .ac-img { width: 100%; height: auto; max-height: 400px; object-fit: contain; filter: none; }
html body #chapters :is(.origin-cn-title,.wordless-title-en) { font-size: 56px; color: inherit !important; }
html body #chapters :is(.origin-en-title,.origin-th-title) { font-family: var(--display); color: inherit !important; }
html body #chapters :is(.cn-line,.origin-stack,.origin-meta,.read-stamp,.read-text) { color: inherit !important; }
html body #chapters .study-drawer { max-width: 1184px; margin: 12px 24px; background: var(--study-field); color: var(--study-ink); }
html body #chapters .study-drawer > summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 24px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.5; min-height: 44px; }
.drawer-sign { font-size: 24px; flex-shrink: 0; }
.study-drawer[open] > summary .drawer-sign { transform: rotate(45deg); }
html body #chapters .study-drawer .panel { padding: 28px 24px !important; }
html body #chapters .study-drawer .panel-image { background: var(--room-ground) !important; color: var(--room-ink) !important; padding: 28px 24px; border: 0; }
html body #chapters .image-caption, html body #chapters .image-caption * { color: var(--room-ink) !important; font-family: var(--body); }
html body #chapters .image-caption { background: var(--room-ground) !important; padding: 16px; }
html body #chapters .chapter .panel-video { background: #101416 !important; color: #fff !important; }
html body #chapters .panel-video :is(.vc-line,.vc-credit,.video-status,.panel-label) { color: #fff !important; }
html body #chapters .palette-note { max-width: 1184px; margin: 24px; font-size: 14px; }
.palette-note summary { cursor: pointer; padding: 14px 0; min-height: 44px; list-style: none; font-family: var(--mono); }
.palette-note > div { max-width: 60ch; line-height: 1.65; }
.palette-note textarea { width: 100%; box-sizing: border-box; background: var(--room-ground); color: var(--room-ink); border: 0; padding: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.palette-note :is(a,button) { color: inherit; }
.palette-note button { background: var(--room-ink); color: var(--room-ground); border: 0; padding: 12px 20px; min-height: 44px; }
html body #chapters .chapter-foot { border: 0; background: transparent !important; color: inherit !important; padding: 32px 24px; flex-wrap: wrap; gap: 20px; }
html body #chapters .chapter-foot button { color: inherit !important; border: 0; min-height: 44px; }
html body #chapters .chapter-foot .ch-next { max-width: 48ch; }
body :is(.index-overlay,.search-overlay,.notes-overlay) { font-family: var(--body); }
body :is(.index-list,.index-sub,.search-results) { font-family: var(--body); }
html body.yin-mode #chapters .chapter,
html body.yin-mode #chapters .chapter .panel { --room-ground: #10191d !important; --room-ink: #f2f3ed !important; }
html body.yin-mode #chapters .chapter .panel-video { background: #101416 !important; }
@media (min-width: 768px) {
  body .topbar .topbar-name { display: inline; }
  body .topbar:not(.is-mobile-open) :is(.yin-toggle,.quiet-toggle,.pinyin-toggle,.deepwork-btn,.toolbar-explore-toggle) { display: inline-flex !important; }
  body .topbar .mobile-menu-btn { display: none !important; }
  body .toolbar-explore { display: block; position: relative; }
  body .toolbar-explore .toolbar-explore-items { display: none; position: absolute; right: 0; top: 100%; min-width: 200px; padding: 12px; }
  body .toolbar-explore.is-open .toolbar-explore-items { display: flex; flex-direction: column; }
  body .toolbar-explore-items .tool-btn { display: flex !important; width: 100%; justify-content: flex-start; }
  body .topbar .tool-label { display: inline; }
  body .topbar .tool-btn > span:first-child:not(.tool-label) { display: none; }
  body .topbar-tools { gap: 8px; }
  body .toolbar-explore-items { background: var(--paper); }
  body .cover { grid-template-columns: 3fr 2fr; }
  body .exhibition-entrance { padding: 64px max(40px, calc((100vw - 1184px)/2)); padding-right: 48px; }
  body .cover-hero-media { display: flex; align-items: center; padding: 40px; }
  body .cover .cover-meta,
  body .cover .cover-stack,
  body .cover .cover-foot { grid-column: 1 / -1; width: min(1184px, calc(100% - 80px)); box-sizing: border-box; margin: 0 auto; padding-left: 0; padding-right: 0; }
  body .cover .cover-stack { grid-template-columns: 1fr; }
  body .cover .cover-text { max-width: 80ch; }
  body .cover .cover-title { font-size: 64px; }
  body .exhibition-map, body .edition-note { padding: 24px 40px; }
  html body #chapters .room-heading { padding: 64px max(40px, calc((100vw - 1184px)/2)); }
  html body #chapters .room-heading::after { width: 24%; }
  html body #chapters .room-heading h2 { max-width: 17ch; position: relative; z-index: 1; width: 70%; }
  html body #chapters .chapter-strip, .room-navigation, html body #chapters .chapter-foot { padding-left: max(40px, calc((100vw - 1184px)/2)); padding-right: max(40px, calc((100vw - 1184px)/2)); }
  html body #chapters .chapter .panel { padding: 40px max(40px, calc((100vw - 1184px)/2)) !important; }
  html body #chapters .chapter .panel-summary { padding-top: 16px !important; }
  html body #chapters .reading-frame { grid-template-columns: 1fr 3fr; gap: 48px; align-items: start; }
  html body #chapters .reading-aside { padding: 24px; }
  html body #chapters .study-drawer, html body #chapters .palette-note { margin-left: max(40px, calc((100vw - 1184px)/2)); margin-right: max(40px, calc((100vw - 1184px)/2)); }
  html body #chapters .study-drawer .panel { padding: 40px !important; }
  html body #chapters .reading-flow > .artifact-cite.has-img { grid-template-columns: 1fr 3fr; }
  html body #chapters .artifact-cite::before { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .exhibition-entrance, .room-navigation, .palette-note { display: none; }
  html body #chapters .chapter { break-before: page; }
  html body #chapters .room-heading::after { display: none; }
}