/* The original palette remains in site.css. These overrides are opt-in. */
html[data-palette="colour"] {
  --paper: #fbfaf7;
  --surface: #edf2ee;
  --ink: #252c29;
  --muted: #686e65;
  --green: #285f61;
  --green-soft: #e5efeb;
  --line: #d9dfd7;
  --accent-blue: #3a5e75;
  --accent-warm: #925037;
  --blue-wash: #edf2f6;
  --warm-wash: #f7ece1;
}
html[data-palette="colour"] .intro .eyebrow,
html[data-palette="colour"] .page-heading > .eyebrow { color: var(--accent-blue); }
html[data-palette="colour"] .intro h1 .brand-dot,
html[data-palette="colour"] .page-heading h1 .brand-dot { color: #a45d42; }
html[data-palette="colour"] .diary-symbol { color: #667669; }
html[data-palette="colour"] .diary-symbol span { color: #255c4f; }
html[data-palette="colour"] .site-header { background: #e8eee9; border-bottom-color: #d0dbd2; }
html[data-palette="colour"] .section-heading h2 { color: var(--accent-blue); }
html[data-palette="colour"] .post-row > time { color: #82593e; }
html[data-palette="colour"] .featured-post { background: var(--blue-wash); border-color: #d8e2e7; }
html[data-palette="colour"] .featured-copy .eyebrow { color: var(--accent-blue); }
html[data-palette="colour"] .image-note { background: var(--warm-wash); color: #725037; }
html[data-palette="colour"] .rss-emblem { background: #f3e8d0; color: #765927; }
html[data-palette="colour"] .topic-links a:nth-child(2) { color: var(--accent-warm); }
html[data-palette="colour"] .article-contents { background: var(--blue-wash); border-color: #d6e0e9; }
html[data-palette="colour"] .article-contents summary { color: var(--accent-blue); }
html[data-palette="colour"] .article-body h2 { color: #315f66; }
html[data-palette="colour"] .article-body pre { background: var(--blue-wash); border-color: #d6e0e9; }
html[data-palette="colour"] .article-body code { background: #e8eef1; }
html[data-palette="colour"] .article-body pre code { background: transparent; }
html[data-palette="colour"] .article-body blockquote { border-left-color: #b98059; color: #72543e; }
html[data-palette="colour"] .article-tags a:nth-child(3n+1) { background: #e5efeb; color: #285c51; border-color: #d4e2db; }
html[data-palette="colour"] .article-tags a:nth-child(3n+2) { background: var(--warm-wash); color: var(--accent-warm); border-color: #e9d9c9; }
html[data-palette="colour"] .article-tags a:nth-child(3n) { background: var(--blue-wash); color: var(--accent-blue); border-color: #d6e0e9; }
html[data-palette="colour"] .comment-avatar { background: #e6edf4; color: var(--accent-blue); }
html[data-palette="colour"] .comment-replies .comment-avatar { background: #f1e8da; color: #765738; }
html[data-palette="colour"] .new-comment-note { background: var(--warm-wash); }
html[data-palette="colour"] .youtube-placeholder { background: #e6efec; border-color: #cfded7; }

/* A separate cool blue option; the two existing palettes above are unchanged. */
html:is([data-palette="blue"], [data-palette="blue-colour"]) {
  --paper: #f7f9fc;
  --surface: #eaf0f7;
  --ink: #243247;
  --muted: #5b6b7e;
  --green: #275f97;
  --green-soft: #e3edf8;
  --line: #d5deea;
  --accent-blue: #315f8a;
  --accent-warm: #536591;
  --blue-wash: #edf2f9;
  --warm-wash: #e9edf7;
}
html:is([data-palette="blue"], [data-palette="blue-colour"]) .site-header { background:#e5edf8; border-bottom-color:#ccd9e9; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .intro .eyebrow,
html:is([data-palette="blue"], [data-palette="blue-colour"]) .page-heading > .eyebrow,
html:is([data-palette="blue"], [data-palette="blue-colour"]) .section-heading h2 { color:#315f8a; }
/* Keep the original monogram colours, as requested. */
html:is([data-palette="blue"], [data-palette="blue-colour"]) .diary-symbol { color:#667669; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .diary-symbol span { color:#255c4f; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .post-row > time { color:#536b8b; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .featured-post { background:#eaf0f8; border-color:#d5deea; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .featured-copy .eyebrow { color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .image-note { background:#e9edf7; color:#465b7c; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .rss-emblem { background:#e0eaf7; color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-contents { background:#eaf0f8; border-color:#d0ddeb; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-contents summary { color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body h2 { color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body pre { background:#edf2f9; border-color:#d2deec; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body code { background:#e5edf7; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body pre code { background:transparent; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body blockquote { border-left-color:#7994b9; color:#4b6283; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-tags a { background:#e6eef8; color:#315f8a; border-color:#d2dfed; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-tags a:nth-child(2n) { background:#e9edf7; color:#536591; border-color:#d7deed; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .comment-avatar { background:#e2ebf7; color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .comment-replies .comment-avatar { background:#e8edf7; color:#536591; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .new-comment-note { background:#eaf0f8; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .youtube-placeholder { background:#e5edf8; border-color:#d0ddeb; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .rss-note a,
html:is([data-palette="blue"], [data-palette="blue-colour"]) .topic-explorer > summary { color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .tag-cloud-link:nth-child(3n+1) { color:#275f97; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .tag-cloud-link:nth-child(3n+2) { color:#536591; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .tag-cloud-link:nth-child(3n) { color:#355e73; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body .code-block {
  --code-paper:#edf2f9;
  --code-toolbar:#e1eaf5;
  --code-border:#d0ddec;
  --code-gutter:#d2deec;
}
html:is([data-palette="blue"], [data-palette="blue-colour"]) .button:hover { background:#1e4975; border-color:#1e4975; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body a { text-decoration-color:#99b2d0; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body .code-copy { color:#315f8a; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .article-body .code-copy:hover { background:#d6e3f3; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .has-thumbnail .video-play { background:#275f97; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .youtube-load:hover .video-play { background:#1e4975; }
html:is([data-palette="blue"], [data-palette="blue-colour"]) .search-result mark { background:#dce9fb; }

/* Blue with two additional accents; the original Blue option is unchanged. */
html[data-palette="blue-colour"] {
  --accent-teal: #24685f;
  --accent-copper: #9b4e36;
  --teal-wash: #e4f1ed;
  --copper-wash: #faeee5;
}
html[data-palette="blue-colour"] .intro .eyebrow,
html[data-palette="blue-colour"] .page-heading > .eyebrow,
html[data-palette="blue-colour"] .section-heading h2,
html[data-palette="blue-colour"] .article-body h2,
html[data-palette="blue-colour"] .resume-body h2 { color: var(--accent-teal); }
html[data-palette="blue-colour"] .intro h1 .brand-dot,
html[data-palette="blue-colour"] .page-heading h1 .brand-dot,
html[data-palette="blue-colour"] .post-row > time { color: var(--accent-copper); }
html[data-palette="blue-colour"] .rss-emblem { background: var(--copper-wash); color: var(--accent-copper); }
html[data-palette="blue-colour"] .topic-links a:nth-child(2n) { color: var(--accent-teal); }
html[data-palette="blue-colour"] .tag-cloud-link:nth-child(3n+2) { color: var(--accent-teal); }
html[data-palette="blue-colour"] .tag-cloud-link:nth-child(3n) { color: var(--accent-copper); }
html[data-palette="blue-colour"] .article-tags a:nth-child(3n+2) { background: var(--teal-wash); color: var(--accent-teal); border-color: #c8dfd6; }
html[data-palette="blue-colour"] .article-tags a:nth-child(3n) { background: var(--copper-wash); color: var(--accent-copper); border-color: #ead4c7; }
html[data-palette="blue-colour"] .article-body blockquote { border-left-color: var(--accent-copper); color: var(--accent-copper); }
html[data-palette="blue-colour"] .comment-replies .comment-avatar { background: var(--teal-wash); color: var(--accent-teal); }
html[data-palette="blue-colour"] .new-comment-note { background: var(--teal-wash); }
html[data-palette="blue-colour"] .resume-introduction { border-left-color: var(--accent-copper); }

/* Preview-only comparison controls; layout and typography stay the same. */
.palette-preview { max-width: var(--width); margin: 14px auto -12px; display: flex; flex-wrap:wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; }
.palette-label { color: var(--muted); margin-right: 5px; }
.palette-preview button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; padding: 6px 9px; }
.palette-preview button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--ink); }
.palette-swatch { width: 10px; height: 10px; display: inline-block; border-radius: 50%; }
.swatch-classic { background: #255c4f; }
.swatch-colour { background: #285f61; box-shadow: 4px 0 0 #a45d42; margin-right: 4px; }
.swatch-blue { background:#275f97; }
.swatch-blue-colour { background:#275f97; box-shadow:4px 0 0 #9b4e36, -4px 0 0 #24685f; margin-inline:4px; }
@media (max-width:1160px) { .palette-preview { margin-left:40px; margin-right:40px; } }
@media (max-width:820px) { .palette-preview { margin-left:27px; margin-right:27px; } }
@media (max-width:580px) {
  .palette-preview { margin: 10px 21px -15px; gap: 2px; }
  .palette-preview button { padding: 6px 7px; font-size: 10px; }
  .palette-label { font-size:10px; }
}
@media print { .palette-preview { display:none; } }