.masthead-brand { position: relative; }
.skin-art, .skin-note, .skin-flora { display: none; }
.masthead[data-skin]:not([data-skin="default"]) .masthead-brand {
  color: var(--skin-ink);
  background: var(--skin-paper);
  padding-inline: var(--page-gutter);
}
body .masthead[data-skin]:not([data-skin="default"]) .masthead-top {
  color: var(--skin-muted);
  border-color: var(--skin-rule);
}
body .masthead[data-skin]:not([data-skin="default"]) .masthead-main {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 170px 8px;
}
.masthead[data-skin]:not([data-skin="default"]) .wordmark { color: var(--skin-ink); }
.masthead[data-skin]:not([data-skin="default"]) .wordmark span { color: var(--skin-accent); }
body .masthead[data-skin]:not([data-skin="default"]) .masthead-ear,
body .masthead[data-skin]:not([data-skin="default"]) .masthead-main > p { display: none; }
.masthead[data-skin]:not([data-skin="default"]) .skin-art:not([hidden]) {
  display: block;
  position: absolute;
  right: calc(var(--page-gutter) + 76px);
  top: 39px;
  width: 98px;
  height: 98px;
  object-fit: cover;
  image-rendering: pixelated;
}
.masthead[data-skin]:not([data-skin="default"]) .skin-flora:not([hidden]) {
  display: block;
  position: absolute;
  right: calc(var(--page-gutter) + 10px);
  bottom: 0;
  width: 140px;
  height: 110px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.masthead[data-skin]:not([data-skin="default"]) .skin-note:not([hidden]) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 170px 18px;
  font: 14px/1.6 var(--serif);
  color: var(--skin-muted);
}
.skin-label { color: var(--skin-accent); font-weight: 700; }
.skin-message { border-left: 1px solid var(--skin-rule); padding-left: 12px; }
@media (min-width: 701px) and (max-width: 1199px) {
  body .masthead[data-skin]:not([data-skin="default"]) .masthead-main { padding-inline: 0 128px; justify-content: flex-start; }
  .masthead[data-skin]:not([data-skin="default"]) .skin-note:not([hidden]) { justify-content: flex-start; padding-inline: 0 128px; }
  .masthead[data-skin]:not([data-skin="default"]) .skin-art:not([hidden]) { width: 76px; height: 76px; top: 42px; right: calc(var(--page-gutter) + 48px); }
  .masthead[data-skin]:not([data-skin="default"]) .skin-flora:not([hidden]) { width: 100px; height: 80px; right: var(--page-gutter); }
}
@media (max-width: 700px) {
  body .masthead[data-skin]:not([data-skin="default"]) .masthead-main {
    justify-content: space-between; min-height: 54px; padding: 5px 0; gap: 8px;
  }
  .masthead[data-skin]:not([data-skin="default"]) .skin-art:not([hidden]) { width: 28px; height: 28px; top: auto; bottom: 1px; right: calc(var(--page-gutter) + 36px); }
  .masthead[data-skin]:not([data-skin="default"]) .skin-flora:not([hidden]) { width: 42px; height: 30px; right: var(--page-gutter); bottom: 0; }
  .masthead[data-skin]:not([data-skin="default"]) .skin-note:not([hidden]) {
    justify-content: flex-start; gap: 8px; padding: 0 84px 10px 2px; font-size: 11px;
  }
  .skin-label { display: inline; }
  .skin-message { padding-left: 8px; }
  body .masthead[data-skin]:not([data-skin="default"]) #date-picker { color: var(--skin-muted); }
}
@media (max-width: 374px) {
  .skin-message { display: none; }
}

/* View tokens live on body; outrank daily.css without changing its geometry. */
body[data-skin="mid-autumn"],
body[data-skin="mid-autumn"][data-view] {
  color-scheme: light;
  --paper: #fffdfb;
  --ink: #302d2b;
  --muted: #6a615b;
  --rule: #d8cec6;
  --accent: #ab3029;
  --autumn-gold: #86621d;
  --autumn-gold-rule: #bda36b;
  --autumn-link: #28634d;
  --autumn-hover: #edf3ee;
  --autumn-selected: #f8eeea;
  --autumn-up: #28634d;
  --autumn-up-surface: #e8f1e9;
  --autumn-down-surface: #f8e9e5;
  --autumn-dialog: #fcfdfc;
  --autumn-backdrop: rgb(22 40 31 / 40%);
  --skin-paper: #fbede8;
  --skin-ink: #722c28;
  --skin-muted: #79554d;
  --skin-accent: #ab3029;
  --skin-rule: #bda36b;
  --skin-image-filter: sepia(.65) saturate(.8) brightness(1.08);
}
body[data-skin="mid-autumn"] .skin-label {
  font-family: var(--sans);
  padding: 0 5px;
  background: var(--skin-accent);
  color: var(--skin-paper);
}
@media (min-width: 701px) {
  body[data-skin="mid-autumn"] .masthead[data-skin] .skin-note:not([hidden]) {
    justify-content: flex-start;
    padding-left: 0;
  }
}

body[data-skin="mid-autumn"] .edition-nav {
  border-top-color: var(--accent);
  border-bottom-color: var(--autumn-gold-rule);
}
body[data-skin="mid-autumn"] #edition-sections {
  border-top-color: var(--accent);
}
body[data-skin="mid-autumn"] .tabs button.active,
body[data-skin="mid-autumn"] .group-nav [aria-selected="true"],
body[data-skin="mid-autumn"] .rank-tabs [aria-pressed="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
body[data-skin="mid-autumn"] .group-nav [aria-selected="true"] {
  background-color: var(--autumn-selected);
}

/* Existing paragraph literals must not bypass the reading palette. */
body[data-skin="mid-autumn"] .brief p,
body[data-skin="mid-autumn"] .paper-list p {
  color: var(--ink);
}
body[data-skin="mid-autumn"] .archive-content .minor,
body[data-skin="mid-autumn"] .archive-content .takeaway {
  color: var(--muted);
}
body[data-skin="mid-autumn"] .brief-category span,
body[data-skin="mid-autumn"] .topic-overview h3::before,
body[data-skin="mid-autumn"] .rank-number {
  color: var(--autumn-gold);
}
body[data-skin="mid-autumn"] .brief-comment {
  border-left-color: var(--accent);
}
body[data-skin="mid-autumn"] .brief-comment-label,
body[data-skin="mid-autumn"] .brief-takeaway > span,
body[data-skin="mid-autumn"] .digest-kicker span:first-child {
  color: var(--accent);
}
body[data-skin="mid-autumn"] .brief-resources a,
body[data-skin="mid-autumn"] .brief-resources svg,
body[data-skin="mid-autumn"] .archive-content a,
body[data-skin="mid-autumn"] .archive-content .person,
body[data-skin="mid-autumn"] .story-meta a,
body[data-skin="mid-autumn"] .paper-source {
  color: var(--autumn-link);
}
body[data-skin="mid-autumn"] .archive-content a,
body[data-skin="mid-autumn"] .brief-resources a span {
  text-decoration-color: var(--autumn-gold);
}
body[data-skin="mid-autumn"] .brief-resources a:hover,
body[data-skin="mid-autumn"] .brief-resources a:hover svg,
body[data-skin="mid-autumn"] .archive-content a:hover,
body[data-skin="mid-autumn"] .story-meta a:hover,
body[data-skin="mid-autumn"] .paper-source:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
body[data-skin="mid-autumn"] .brief-resources a:hover span {
  text-decoration-color: var(--accent);
}

body[data-skin="mid-autumn"] .paper-footer,
body[data-skin="mid-autumn"] .page-footer {
  border-top-color: var(--autumn-gold-rule);
}
body[data-skin="mid-autumn"] .paper-footer a,
body[data-skin="mid-autumn"] .ranking-heading h2 {
  color: var(--autumn-link);
}
body[data-skin="mid-autumn"] .paper-footer a:hover {
  color: var(--accent);
}
body[data-skin="mid-autumn"] .avatar-missing {
  background-color: var(--autumn-hover);
  color: var(--muted);
}

body[data-skin="mid-autumn"] dialog,
body[data-skin="mid-autumn"] #archive-dialog {
  background-color: var(--autumn-dialog);
  color: var(--ink);
  border-color: var(--autumn-gold-rule);
}
body[data-skin="mid-autumn"] dialog::backdrop {
  background-color: var(--autumn-backdrop);
}
body[data-skin="mid-autumn"] .dialog-header {
  border-bottom-color: var(--autumn-gold-rule);
}
body[data-skin="mid-autumn"] #archive-dialog .dialog-header,
body[data-skin="mid-autumn"] .share-preview {
  background-color: var(--autumn-dialog);
}
body[data-skin="mid-autumn"] .icon-button:hover:not(:disabled),
body[data-skin="mid-autumn"] .feedback-actions button:hover:not(:disabled) {
  background-color: var(--autumn-hover);
  color: var(--ink);
}
body[data-skin="mid-autumn"] .tabs button:hover:not(:disabled),
body[data-skin="mid-autumn"] .group-nav [role="tab"]:hover:not(:disabled),
body[data-skin="mid-autumn"] .rank-tabs button:hover:not(:disabled) {
  color: var(--accent);
}
body[data-skin="mid-autumn"] .feedback-actions button[aria-pressed="true"],
body[data-skin="mid-autumn"] .feedback-actions button[data-vote="down"]:hover:not(:disabled) {
  color: var(--accent);
  background-color: var(--autumn-down-surface);
}
body[data-skin="mid-autumn"] .feedback-actions button[data-vote="up"][aria-pressed="true"],
body[data-skin="mid-autumn"] .feedback-actions button[data-vote="up"]:hover:not(:disabled) {
  color: var(--autumn-up);
  background-color: var(--autumn-up-surface);
}
body[data-skin="mid-autumn"] button:disabled {
  color: var(--muted);
}
body[data-skin="mid-autumn"] :focus-visible {
  outline-color: var(--accent);
}
body[data-skin="mid-autumn"] ::selection {
  color: var(--paper);
  background-color: var(--autumn-link);
}

:root[data-color-scheme="dark"] {
/* Independently tuned night palette; the loader wraps this file in dark media. */
body[data-skin="mid-autumn"],
body[data-skin="mid-autumn"][data-view] {
  color-scheme: dark;
  --paper: #242222;
  --ink: #eeeae0;
  --muted: #c5b8b1;
  --rule: #574746;
  --accent: #f29884;
  --autumn-gold: #d9bb74;
  --autumn-gold-rule: #80704b;
  --autumn-link: #b4d4bc;
  --autumn-hover: #303c33;
  --autumn-selected: #3c2e29;
  --autumn-up: #b4d4bc;
  --autumn-up-surface: #2b4133;
  --autumn-down-surface: #482e29;
  --autumn-dialog: #2e2827;
  --autumn-backdrop: rgb(8 13 10 / 76%);
  --skin-paper: #422b2a;
  --skin-ink: #eeeae0;
  --skin-muted: #b5beb3;
  --skin-accent: #f29884;
  --skin-rule: #80704b;
  --skin-image-filter: sepia(.5) saturate(.75) brightness(1.05);
}

/* Gold anchors the night edition; coral remains the active-state signal. */
body[data-skin="mid-autumn"] .edition-nav,
body[data-skin="mid-autumn"] #edition-sections {
  border-top-color: var(--autumn-gold-rule);
}
body[data-skin="mid-autumn"] .ranking-heading h2 {
  color: var(--ink);
}
body[data-skin="mid-autumn"] ::selection {
  color: var(--paper);
  background-color: var(--autumn-gold);
}

}

/* Keep the reading palette and geometry; festive ink belongs to the masthead. */
body[data-skin="national-day"] {
  --skin-paper: #98292c;
  --skin-ink: #fff8ed;
  --skin-muted: #f2deca;
  --skin-accent: #ffe0a0;
  --skin-rule: #cc9d54;
  --national-hover: #7d2025;
  --national-rule: #a07832;
}

/* Date and appearance controls inside the band use its local contrast tokens. */
body[data-skin="national-day"] .masthead-brand {
  --ink: var(--skin-ink);
  --muted: var(--skin-muted);
  --accent: var(--skin-accent);
  --rule: var(--skin-rule);
  border-bottom: 2px solid var(--skin-rule);
}
body[data-skin="national-day"] .masthead-brand .icon-button:hover:not(:disabled) {
  color: var(--skin-ink);
  background-color: var(--national-hover);
}
body[data-skin="national-day"] .masthead-brand :focus-visible {
  outline-color: var(--skin-accent);
}
body[data-skin="national-day"] .masthead-brand ::selection {
  color: var(--skin-paper);
  background-color: var(--skin-accent);
}
body[data-skin="national-day"] .skin-label {
  font-family: var(--sans);
  color: var(--skin-accent);
}
body[data-skin="national-day"] .edition-nav {
  border-bottom-color: var(--national-rule);
}

/* Reserve a separate note row for the sprite so date controls remain unobscured. */
body[data-skin="national-day"] .masthead[data-skin] .skin-note:not([hidden]) {
  justify-content: flex-start;
  min-height: 52px;
  padding: 4px 88px 12px 0;
}
body[data-skin="national-day"] .masthead[data-skin] .skin-art:not([hidden]) {
  top: auto;
  bottom: 6px;
  right: var(--page-gutter);
  width: 72px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 700px) {
  body[data-skin="national-day"] .masthead[data-skin] #mobile-date-nav #date-picker {
    color: var(--ink);
  }
  body[data-skin="national-day"] .masthead[data-skin] #mobile-date-nav #date-picker:hover {
    color: var(--accent);
  }
  body[data-skin="national-day"] .masthead[data-skin] .skin-note:not([hidden]) {
    min-height: 36px;
    padding: 0 64px 8px 2px;
  }
  body[data-skin="national-day"] .masthead[data-skin] .skin-art:not([hidden]) {
    bottom: 4px;
    width: 48px;
    height: 30px;
  }
}

:root[data-color-scheme="dark"] {
/* The loader scopes this palette to the resolved dark appearance. */
body[data-skin="national-day"] {
  --skin-paper: #532224;
  --skin-ink: #fff8ed;
  --skin-muted: #ead1b0;
  --skin-accent: #f4cc77;
  --skin-rule: #ad854b;
  --national-hover: #703236;
  --national-rule: #ad854b;
}

}