/* Common Table palette shared by the homepage, books, music, and other pages.
   Loaded after each page's legacy styles. Artwork and DSP branding remain intact. */
:root {
  color-scheme: light;
  --page: #ebe0ca;
  --paper: var(--page);
  --ink: #3f3025;
  --muted: #675345;
  --accent: #8a4630;
  --purple: var(--accent);
  --rule: #69534155;
  --line: #bda78c;
  --table: #d3b692;
  --table-edge: #ae8e68;
  --table-inlay: #b8987366;
  --label: #443426;
  --note: #523921;
  --card-paper: #f8f2e1;
  --paper-ink: #3f3025;
  --project: #798578;
  --project-ink: #111d16;
  --project-rule: #233f3277;
  --selected: #3f3025;
  --selected-ink: #f8f2e1;
  --shadow: #59321440;
  --table-shadow: #714d2520;
  --focus: #8a4630;
  --surface: #f8f2e1;
  --surface-strong: #e0ccb0;
  --surface-hover: #e8d8bd;
  --deep: #3f3025;
  --deep-ink: #f6e9d1;
  --deep-muted: #e0c9ac;
  --reader-ground: #d9c7ac;
  --text: var(--ink);
  --quiet: var(--muted);
  --night: var(--page);
  --serif: Georgia, 'Times New Roman', serif;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --page: #241a1b;
  --ink: #f6e9d1;
  --muted: #d6c3b0;
  --accent: #e6a47d;
  --rule: #f4c3a940;
  --line: #8e6456;
  --table: #743829;
  --table-edge: #a16a4f;
  --table-inlay: #f4c3a938;
  --label: #f8decf;
  --note: #f6e9d1;
  --card-paper: #ecd8b9;
  --paper-ink: #3f3025;
  --project: #542d25;
  --project-ink: #f6e9d1;
  --project-rule: #f4c3a955;
  --selected: #e6a47d;
  --selected-ink: #241a1b;
  --shadow: #12090a77;
  --table-shadow: #10080966;
  --focus: #e6a47d;
  --surface: #542d25;
  --surface-strong: #743829;
  --surface-hover: #63372c;
  --deep: #382225;
  --deep-ink: #f6e9d1;
  --deep-muted: #e0c9ac;
  --reader-ground: #302224;
}
body {
  background: var(--page);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
body:not(.common-table-home) h1,
body:not(.common-table-home) h2,
body:not(.common-table-home) h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
}
body:not(.common-table-home) h3 { letter-spacing: -.02em; }
body:not(.common-table-home) .wordmark,
body:not(.common-table-home) .listen-brand {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  white-space: nowrap;
  letter-spacing: -.04em;
}
body:not(.common-table-home) .nav {
  min-height: 100px;
  height: auto;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 20px;
}
body:not(.common-table-home) #main-nav { margin-left: auto; }
body:not(.common-table-home) .menu { color: var(--ink); min-height: 44px; }
body:not(.common-table-home) .nav > .theme-switch { margin-left: auto; }
body:not(.common-table-home) .breadcrumbs { font-size: 13px; }
body:not(.common-table-home) .button {
  background: var(--selected);
  color: var(--selected-ink);
  border-radius: 24px;
  min-height: 44px;
}
body:not(.common-table-home) .button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
body:not(.common-table-home) .card,
body:not(.common-table-home) .release-card { background: var(--surface); }
body:not(.common-table-home) .card:hover { border-color: var(--accent); }
body:not(.common-table-home) .book,
body:not(.common-table-home) .portrait-panel { background: var(--surface-strong); }
body:not(.common-table-home) .ribbon,
body:not(.common-table-home) .belief,
body:not(.common-table-home) .text-portrait {
  background: var(--deep);
  color: var(--deep-ink);
}
body:not(.common-table-home) .ribbon p,
body:not(.common-table-home) .belief p,
body:not(.common-table-home) .text-portrait p { color: var(--deep-muted); }
body:not(.common-table-home) .belief .eyebrow { color: #e6a47d; }
body:not(.common-table-home) .belief .text-link { color: var(--deep-ink); }
.skip { background: var(--selected); color: var(--selected-ink); }
:focus-visible { outline-color: var(--focus); }

/* A shared, keyboard accessible appearance control; state is set by theme.js. */
.theme-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 30px;
  gap: 2px;
}
.theme-switch[hidden] { display: none; }
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 24px;
  padding: 0 12px;
  min-height: 44px;
  min-width: 44px;
  font: 12px/1.3 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.theme-switch button:hover { background: var(--surface-hover); }
.theme-switch button[aria-pressed="true"] {
  background: var(--selected);
  color: var(--selected-ink);
}
.theme-switch svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Reader facsimiles retain their original white paper. The selectable text
   alternative, toolbar, and navigation follow the selected appearance. */
.reader-shell { background: var(--reader-ground); }
.reader-sections { background: var(--deep); }
.reader-sections button { color: var(--deep-ink); }
.reader-sections button span { color: var(--deep-muted); }
.reader-sections button[aria-pressed="true"] {
  background: #f4c3a918;
  color: var(--deep-ink);
  box-shadow: inset 3px 0 #e6a47d;
}
.reader-sections button[aria-pressed="true"] span { color: var(--deep-muted); }
.reader-toolbar,
.text-page,
.reader-error { background: var(--surface); color: var(--ink); }
.reader-toolbar button,
.reader-toolbar select,
.reader-error button {
  background: var(--page);
  color: var(--ink);
  border-color: var(--line);
}
.reader-toolbar button:hover:not(:disabled) { background: var(--surface-hover); }
.reader-toolbar button[aria-pressed="true"] {
  background: var(--selected);
  color: var(--selected-ink);
}
.preview-stamp { background: var(--surface); }
.page-viewport { background: #fff; }
.book-cover,
.home-book-cover img { box-shadow: 10px 16px 30px var(--shadow); }

/* The page palette changes; streaming services keep their own colors/logos. */
body[data-song] { background: var(--page); color: var(--ink); }
.listen-header { flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.listen-header .theme-switch { margin-left: auto; }
.listen-breadcrumbs { margin-left: auto; }
body[data-song] .listening h1 { letter-spacing: -.035em; }
body[data-song] .song-facts h2,
body[data-song] .official-video h2 { font-size: 1.45rem; }
.official-video-cta {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
}
.official-video-cta:hover { background: var(--surface-hover); }
.platform-link { border-color: #0003; }
.platform-link:hover { border-color: var(--accent); }
:root[data-theme="night"] .platform-link { border-color: #ffffff40; }
:root[data-theme="night"] .platform-link:hover { border-color: var(--accent); }
.video-poster { background: var(--surface); }
.cover { box-shadow: 0 22px 65px var(--shadow); }

/* Consent keeps equally visible controls in both appearances. */
.analytics-panel {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 10px 50px var(--shadow);
  font-family: Arial, Helvetica, sans-serif;
}
.analytics-panel details { color: var(--muted); }
.analytics-actions button {
  background: var(--selected);
  color: var(--selected-ink);
  border-color: var(--selected);
  font-family: Arial, Helvetica, sans-serif;
}
.analytics-actions button:hover { background: var(--selected); filter: brightness(1.08); }
.analytics-panel button:focus-visible,
.analytics-preference:focus-visible,
.analytics-panel summary:focus-visible { outline-color: var(--focus); }

@media (min-width:681px) and (max-width:1100px) {
  body:not(.common-table-home) .nav { flex-wrap: wrap; gap: 12px 20px; }
  body:not(.common-table-home) #main-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-end;
    gap: 24px;
  }
}
@media (max-width:680px) {
  body:not(.common-table-home) .nav { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  body:not(.common-table-home) .nav .wordmark { margin-right: auto; }
  body:not(.common-table-home) .nav .menu { margin-left: auto; }
  body:not(.common-table-home) .nav > .theme-switch { order: 3; margin-left: 0; }
  body:not(.common-table-home) #main-nav { order: 4; margin-left: 0; }
  body:not(.common-table-home) .nav > .theme-switch + #main-nav { padding-top: 6px; }
  .theme-switch { padding: 2px; }
  .theme-switch button { padding: 0 10px; gap: 5px; }
  .theme-switch svg { display: none; }
  .listen-header { gap: 12px; }
  .listen-header .listen-brand { margin-right: auto; }
  .listen-header .theme-switch { order: 3; margin-left: 0; }
  .listen-breadcrumbs { flex-basis: 100%; order: 4; margin-left: 0; }
  .listen-breadcrumbs ol { justify-content: flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .theme-switch button { transition: none; }
}