/*
Theme Name: Bad Machinery Modern
Theme URI: https://badmachinery.com/
Author: John Allison / prototype assistance
Description: Responsive Comic Easel test theme preserving Bad Machinery's existing site behaviour.
Version: 1.0.0
Text Domain: bm-modern
*/

:root {
  --site-max: 1120px;
  --comic-max: 880px;
  --content-max: 880px;
  --reading-max: 650px;
  --sidebar-width: 230px;
  --gap: clamp(1rem, 2.2vw, 2rem);
  --border: #d9d9d9;
  --text: #171717;
  --muted: #666;
  --surface: #fff;
  --page: #ededed;
  --accent: #b21d16;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.62;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .12em; }
button, input, select, textarea { font: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { background: var(--surface); }
.header-inner { max-width: var(--comic-max); margin: 0 auto; }
.site-branding { min-width: 0; }
.site-branding .widget { margin: 0; }
.site-branding .widget-content { padding: 0; }
.site-branding img,
.custom-logo,
.legacy-header-image img { display: block; width: 100%; height: auto; }
.site-title { margin: 0; padding: 1.25rem 1rem; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.site-title a { color: var(--text); text-decoration: none; }

.nav-bar { background: #111; color: #fff; }
.nav-inner { max-width: var(--comic-max); margin: 0 auto; position: relative; }
.menu-toggle { display: none; margin: .45rem .65rem; border: 1px solid #777; background: #222; color: #fff; padding: .55rem .8rem; }
.primary-nav ul,
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav > div > ul,
.primary-nav > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.primary-nav li { position: relative; }
.primary-nav a { display: block; padding: .62rem .8rem; color: #fff; text-decoration: none; font-size: .82rem; line-height: 1.2; }
.primary-nav a:hover,
.primary-nav a:focus-visible { background: #333; }
.primary-nav .sub-menu { display: none; position: absolute; z-index: 20; min-width: 190px; background: #111; }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }

.legacy-widget-area { max-width: var(--site-max); margin: 0 auto; }
.above-header-area, .menubar-widget-area { padding: .5rem 1rem; }

.site-main { min-height: 50vh; }
.comic-reader { background: var(--surface); padding: 0 1rem 1.1rem; }
.comic-reader-inner { max-width: var(--comic-max); margin: 0 auto; }
.comic-notice { margin: 0 auto 1rem; }
.comic-notice.under { margin: 1rem auto 0; }
.comic-notice .sidebar { margin: 0; }
.comic-notice .widget { margin: 0 0 .5rem; }
.comic-notice .widget-content { padding: .7rem .9rem; background: #f6f6f6; border: 1px solid var(--border); }
.comic-notice .widget-title { margin: 0 0 .4rem; font-size: 1rem; }
.bm-comic-image { text-align: center; }
.bm-comic-image img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; }

.comic-controls { margin: 1rem auto 0; display: grid; gap: .6rem; }
.chapter-control { display: flex; justify-content: center; }
.chapter-control form { margin: 0; width: min(100%, 260px); }
.chapter-control select { width: 100%; min-height: 2.5rem; padding: .35rem .6rem; font-size: .85rem; }
.comic-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.comic-nav a, .comic-nav span { min-height: 2.35rem; display: flex; align-items: center; justify-content: center; padding: .45rem .55rem; border: 1px solid #aaa; background: #f4f4f4; color: #222; text-align: center; text-decoration: none; font-size: .82rem; }
.comic-nav a:hover, .comic-nav a:focus-visible { background: #e4e4e4; }
.comic-nav .is-disabled { color: #999; background: #fafafa; }

.content-shell { max-width: var(--content-max); margin: 0 auto; padding: 1.4rem 1rem 1rem; background: var(--surface); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: 2rem; align-items: start; }
.content-column { min-width: 0; }
.entry { position: relative; max-width: var(--reading-max); margin: 0 0 2.35rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); }
.entry-header { margin-bottom: 1rem; }
.entry-title { margin: 0 0 .28rem; line-height: 1.12; font-size: clamp(1.45rem, 2.4vw, 1.7rem); font-weight: 650; letter-spacing: -.015em; }
.entry-title a { color: var(--accent); text-underline-offset: .12em; }
.entry-meta, .comic-taxonomy { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.entry-category a, .comic-taxonomy a { color: var(--accent); text-underline-offset: .12em; }
.entry-content { font-size: 1rem; line-height: 1.62; }
.entry-content p { margin: 0 0 1em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content img { height: auto; }
.entry-footer { min-height: 1rem; }
.comment-link { margin-top: 1rem; text-align: right; font-size: .76rem; font-weight: 650; }
.comment-link a { text-decoration: none; }
.current-comic-post { margin-top: 0; }
.news-stream { margin-top: .2rem; }

.site-sidebar { min-width: 0; }
.site-sidebar { font-size: .82rem; line-height: 1.48; }
.site-sidebar .widget { margin: 0 0 1.6rem; }
.site-sidebar .widget-content { padding: 0; }
.site-sidebar .widget-title { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.2; font-weight: 700; }
.site-sidebar ul { margin: 0; padding-left: 1.1rem; }
.site-sidebar img { display: block; max-width: 100%; height: auto; }
.over-blog-area, .under-blog-area { max-width: var(--reading-max); margin: 0 0 1.5rem; }

.pagination { margin: 2rem 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-numbers { padding: .4rem .65rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; }
.comments-area { max-width: var(--reading-max); margin-top: 2rem; }
.comment-list { padding-left: 1.25rem; }

.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-widget-grid { max-width: var(--content-max); margin: 0 auto; padding: 1.5rem 1rem 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 1rem; color: var(--muted); font-size: .8rem; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: .75rem; }
.footer-nav a { color: inherit; }

/* Comic Easel outputs some legacy layout wrappers; keep the content but not their old geometry. */
#comic-wrap, .comic-table, #comic { display: block !important; width: auto !important; }
#comic td { display: block; }

@media (max-width: 760px) {
  body { background: var(--surface); }
  .menu-toggle { display: inline-block; }
  .primary-nav { display: none; }
  .primary-nav.is-open { display: block; }
  .primary-nav > div > ul, .primary-nav > ul { display: block; }
  .primary-nav li { border-top: 1px solid #333; }
  .primary-nav a { padding: .75rem 1rem; }
  .primary-nav .sub-menu { position: static; display: block; padding-left: 1rem; background: #1a1a1a; }
  .comic-reader { padding-left: 0; padding-right: 0; }
  .comic-controls { padding: 0 .65rem; }
  .content-shell { padding: 1rem .7rem; }
  .content-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .entry, .over-blog-area, .under-blog-area { max-width: none; }
  .site-sidebar { border-top: 1px solid var(--border); padding-top: 1.25rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
  .footer-widget-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .comic-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .comic-nav a, .comic-nav span { min-height: 2.7rem; padding: .35rem .15rem; font-size: .72rem; }
  .chapter-control form { width: 100%; }
  .site-sidebar { grid-template-columns: 1fr; }
}

/* v4: editorial typography. The comic remains the loudest thing on the page;
   the surrounding site supplies a deliberately composed, literary straight face. */
body {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #1b1b19;
  line-height: 1.58;
}
.primary-nav,
.menu-toggle,
.comic-controls,
.entry-meta,
.comic-taxonomy,
.edit-link,
.comment-link,
.site-sidebar .widget-title,
.site-footer,
.pagination,
input, button, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.entry-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(1.65rem, 2.7vw, 2rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.025em;
}
.entry-title a { text-decoration-thickness: 1px; text-underline-offset: .14em; }
.entry-content { font-size: 1rem; line-height: 1.66; }
.entry-meta, .comic-taxonomy {
  font-size: .7rem;
  line-height: 1.5;
  letter-spacing: .015em;
}
.edit-link { display: inline-block; margin-top: .28rem; font-size: .68rem; font-weight: 650; }
.edit-link a { text-decoration: none; }

/* Comic Easel owns the hierarchy and empty-chapter behaviour; theme owns appearance. */
.bm-chapter-dropdown #chapter-select { margin: 0; }
.bm-chapter-dropdown select { width: 100%; min-height: 2.5rem; padding: .35rem .6rem; font-size: .82rem; }

/* Sidebar as marginalia rather than a competing column. */
.site-sidebar { font-size: .78rem; line-height: 1.48; color: #4f4f4a; }
.site-sidebar .widget { margin-bottom: 1.85rem; }
.site-sidebar .widget-title {
  margin-bottom: .6rem;
  font-size: .7rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5d5d58;
}
.site-sidebar a { text-decoration-thickness: 1px; text-underline-offset: .12em; }

/* [upcoming_posts] / “Still to come”: intentionally slight, deadpan future marginalia. */
.site-sidebar h6 {
  margin: 0 0 .58rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 400;
  color: #555550;
}
.site-sidebar h6 em {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .02em;
  color: #888883;
}


/* v5: editorial / small-literary-journal treatment.
   Keep the site quiet: the comic and John's masthead remain the expressive assets. */
:root {
  --border: #c9c3b8;
  --text: #181713;
  --muted: #6b675f;
  --surface: #fffdf7;
  --page: #eeeae1;
  --accent: #9f271f;
  --paper-rule: #2a2925;
}

body {
  background: var(--page);
  color: var(--text);
}

.site-header,
.comic-reader,
.content-shell,
.site-footer {
  background: var(--surface);
}

/* The masthead is supplied through Site Identity; don't stylistically interfere with it. */
.header-inner {
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.site-branding img,
.custom-logo,
.legacy-header-image img {
  max-height: none;
}

/* Navigation as a literary contents line rather than a WordPress bar. */
.nav-bar {
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
}
.nav-inner { max-width: var(--comic-max); }
.primary-nav,
.menu-toggle {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.primary-nav > div > ul,
.primary-nav > ul {
  justify-content: space-between;
  align-items: stretch;
}
.primary-nav li {
  flex: 0 1 auto;
}
.primary-nav a {
  color: var(--text);
  background: transparent;
  padding: .8rem .72rem .74rem;
  font-size: .76rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}
.primary-nav .sub-menu {
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--paper-rule);
  box-shadow: 0 .35rem .8rem rgba(0,0,0,.08);
}
.primary-nav .sub-menu a {
  color: var(--text);
  padding: .72rem .85rem;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--border);
}
.primary-nav .sub-menu li:last-child a { border-bottom: 0; }
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible { color: var(--accent); }

/* Keep comic controls intentionally functional, but less generic. */
.comic-controls { margin-top: 1.2rem; }
.chapter-control select,
.bm-chapter-dropdown select {
  color: var(--text);
  background: #fbf8f0;
  border: 1px solid #aaa398;
  border-radius: 0;
}
.comic-nav { gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.comic-nav a,
.comic-nav span {
  min-height: 2.4rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .72rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.comic-nav a:first-child,
.comic-nav span:first-child { border-left: 1px solid var(--border); }
.comic-nav a:hover,
.comic-nav a:focus-visible { background: #f4efe5; color: var(--accent); }
.comic-nav .is-disabled { background: transparent; color: #aaa49b; }

/* Editorial text: quiet, spacious, and visibly distinct from the interface. */
.content-shell { padding-top: 1.7rem; }
.entry {
  margin-bottom: 2.8rem;
  padding-bottom: 2.15rem;
  border-bottom-color: var(--border);
}
.entry-title {
  color: var(--text);
  font-size: clamp(1.7rem, 2.9vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.entry-title a {
  color: var(--text);
  text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus-visible { color: var(--accent); }
.entry-meta,
.comic-taxonomy {
  margin-top: .4rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .68rem;
  font-style: italic;
  letter-spacing: .015em;
}
.entry-content {
  font-size: 1rem;
  line-height: 1.72;
}
.entry-content p { margin-bottom: 1.08em; }
.entry-content blockquote {
  margin: 1.4em 0;
  padding-left: 1.15em;
  border-left: 2px solid var(--border);
  color: #49463f;
}
.edit-link,
.comment-link {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Marginalia. Especially Still to come: fun footnote, not promotional module. */
.site-sidebar {
  color: #5d5951;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .76rem;
  line-height: 1.45;
}
.site-sidebar .widget {
  margin-bottom: 2rem;
  padding-top: .15rem;
}
.site-sidebar .widget-title {
  margin: 0 0 .72rem;
  padding-bottom: .34rem;
  border-bottom: 1px solid var(--border);
  color: #4a4741;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.site-sidebar ul {
  list-style: none;
  padding-left: 0;
}
.site-sidebar li {
  margin: 0 0 .28rem;
}
.site-sidebar h6 {
  margin: 0 0 .3rem;
  color: #5a564e;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .68rem;
  font-weight: 400;
  line-height: 1.35;
}
.site-sidebar h6 em {
  color: #8a847a;
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .04em;
}
.site-sidebar a { color: #4d4942; }
.site-sidebar a:hover,
.site-sidebar a:focus-visible { color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--paper-rule);
}
.footer-inner {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .7rem;
  letter-spacing: .02em;
}

@media (max-width: 760px) {
  .nav-bar { border-top-color: var(--paper-rule); }
  .menu-toggle {
    display: inline-block;
    margin: .4rem .65rem;
    padding: .55rem .2rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .primary-nav { border-top: 1px solid var(--border); }
  .primary-nav li { border-top: 0; border-bottom: 1px solid var(--border); }
  .primary-nav a { color: var(--text); padding: .8rem 1rem; }
  .primary-nav .sub-menu {
    border: 0;
    box-shadow: none;
    background: #f8f4eb;
  }
  .primary-nav .sub-menu a { color: var(--text); }
  .content-shell { padding-top: 1.35rem; }
}


/* v6: breathing room, archive-reading continuity, accessibility and comments. */
:root {
  --site-max: 980px;
  --content-max: 980px;
  --comic-field-max: 980px;
  --comic-max: 880px;
  --sidebar-width: 240px;
}

/* The masthead, menu and editorial field may breathe to 980px; comic art never exceeds 880px. */
.header-inner,
.nav-inner,
.content-shell,
.footer-widget-grid,
.footer-inner { max-width: var(--site-max); }

.comic-reader { background: transparent; padding-left: 0; padding-right: 0; }
.comic-reader-inner {
  max-width: var(--comic-field-max);
  margin: 0 auto;
  padding: 0 50px 1.1rem;
  background: #fff;
}
.bm-comic-image { max-width: var(--comic-max); margin: 0 auto; scroll-margin-top: 1rem; }
.bm-comic-image img { max-width: 100%; }
.comic-controls { max-width: var(--comic-max); }
.comic-notice { max-width: var(--comic-max); }

/* Sequential navigation must be unmistakably readable on the cream/white field. */
.comic-nav a { color: #171512; }
.comic-nav a:visited { color: #171512; }
.comic-nav a:hover,
.comic-nav a:focus-visible { color: #7e1814; background: #f3eee3; }
.comic-nav .is-disabled { color: #817b72; }

/* Keyboard focus is part of the visual system, not an afterthought. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.comic-nav a:focus-visible { position: relative; z-index: 1; }

/* Comments: editorial conversation rather than stock WordPress furniture. */
.comments-area {
  max-width: var(--reading-max);
  margin: 2.5rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--paper-rule);
}
.comments-area > h2,
.comment-reply-title {
  margin: 0 0 1.35rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 400;
}
.comment-list,
.comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children {
  margin-left: 1.45rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--border);
}
.comment-list .comment { margin: 0 0 1.5rem; }
.comment-body {
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.comment-meta {
  margin-bottom: .65rem;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--muted);
}
.comment-author { font-family: Georgia, "Times New Roman", Times, serif; font-size: .86rem; }
.comment-author .avatar { width: 36px; height: 36px; margin-right: .6rem; vertical-align: middle; }
.comment-metadata { margin-top: .2rem; font-style: italic; }
.comment-metadata a { color: var(--muted); }
.comment-content { font-family: Georgia, "Times New Roman", Times, serif; font-size: .94rem; line-height: 1.62; }
.comment-content p { margin: 0 0 .85em; }
.reply { margin-top: .65rem; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.reply a { text-decoration: none; }
.comment-respond { margin-top: 2rem; }
.comment-form p { margin: 0 0 1rem; }
.comment-form label { display: block; margin-bottom: .25rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .65rem .7rem;
  border: 1px solid #9f998f;
  border-radius: 0;
  background: #fff;
  color: var(--text);
}
.comment-form textarea { min-height: 9rem; resize: vertical; }
.form-submit input[type="submit"] {
  padding: .6rem .9rem;
  border: 1px solid var(--paper-rule);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.form-submit input[type="submit"]:hover { color: var(--accent); }

@media (max-width: 980px) {
  .comic-reader-inner { padding-left: max(0px, calc((100vw - 880px) / 2)); padding-right: max(0px, calc((100vw - 880px) / 2)); }
}
@media (max-width: 900px) {
  .comic-reader-inner { padding-left: 0; padding-right: 0; }
  .comic-controls { padding-left: .65rem; padding-right: .65rem; }
}
@media (max-width: 760px) {
  .comment-list .children { margin-left: .55rem; padding-left: .7rem; }
  .comment-author .avatar { width: 30px; height: 30px; }
}


/* v6.1: book-page comic heading, footnote commentary, and hard contrast fix for comic navigation. */
.comic-page-heading {
  max-width: var(--comic-max);
  margin: 0 auto .45rem;
  padding-top: .35rem;
  color: #555047;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .68rem;
  line-height: 1.35;
  letter-spacing: .035em;
  text-align: left;
}
.comic-page-title { font-variant: small-caps; letter-spacing: .07em; }
.comic-page-date { color: #777066; font-style: italic; }

/* These declarations intentionally outrank plugin/link-state styling. */
.comic-reader .comic-nav > a,
.comic-reader .comic-nav > a:link,
.comic-reader .comic-nav > a:visited {
  color: #18140f !important;
  -webkit-text-fill-color: #18140f !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 600;
}
.comic-reader .comic-nav > a:hover,
.comic-reader .comic-nav > a:focus-visible {
  color: #7e1814 !important;
  -webkit-text-fill-color: #7e1814 !important;
  background: #f3eee3 !important;
}
.comic-reader .comic-nav > .is-disabled {
  color: #5f5950 !important;
  -webkit-text-fill-color: #5f5950 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 400;
}

/* Comic commentary is a note attached to the page, not another blog post. */
.current-comic-post.comic-footnote {
  max-width: 620px;
  margin: 0 0 2.25rem;
  padding: .9rem 0 1.15rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.comic-footnote .comic-footnote-content {
  color: #4a463f;
  font-size: .88rem;
  line-height: 1.62;
}
.comic-footnote .comic-footnote-content p { margin-bottom: .8em; }
.comic-footnote .comic-footnote-content:empty { display: none; }
.comic-footnote-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .8rem;
  margin-top: .55rem;
  color: var(--muted);
}
.comic-footnote-meta .comic-taxonomy {
  margin-top: 0;
  font-size: .62rem;
  line-height: 1.45;
}
.comic-footnote-meta .edit-link {
  margin-top: 0;
  font-size: .6rem;
}
.comic-footnote-meta .edit-link a { color: var(--muted); }
.comic-footnote-meta .edit-link a:hover,
.comic-footnote-meta .edit-link a:focus-visible { color: var(--accent); }

@media (max-width: 900px) {
  .comic-page-heading { padding-left: .65rem; padding-right: .65rem; }
}
\n\n/* v6.2: comic and its commentary form one editorial page. */\n.comic-page-heading {\n  margin-bottom: .6rem;\n  padding-top: .65rem;\n  color: #3d3933;\n  font-size: .86rem;\n  line-height: 1.35;\n}\n.comic-page-title { font-weight: 600; }\n.comic-page-date { color: #686158; }\n\n.comic-notes-section {\n  max-width: var(--comic-max);\n  margin: 1.45rem auto 0;\n  padding: 0 0 .4rem;\n}\n.comic-notes-heading {\n  display: flex;\n  align-items: center;\n  gap: .8rem;\n  margin: 0 0 .75rem;\n  color: #302c27;\n  font-family: Georgia, "Times New Roman", Times, serif;\n  font-size: .92rem;\n  line-height: 1.2;\n  font-weight: 400;\n  font-variant: small-caps;\n  letter-spacing: .07em;\n}\n.comic-notes-heading::after {\n  content: "";\n  flex: 1 1 auto;\n  height: 1px;\n  background: var(--border);\n}\n.current-comic-post.comic-footnote {\n  max-width: 680px;\n  margin: 0;\n  padding: 0 0 1.25rem;\n  border: 0;\n}\n.comic-footnote .comic-footnote-content {\n  color: #3f3b35;\n  font-size: 1rem;\n  line-height: 1.62;\n}\n.comic-footnote .comic-footnote-content p { margin: 0 0 .9em; }\n.comic-footnote-meta { margin-top: .65rem; }\n\n@media (max-width: 900px) {\n  .comic-notes-section { padding-left: .65rem; padding-right: .65rem; }\n  .comic-page-heading { font-size: .82rem; }\n}\n

/* v6.3: individual comic pages end in a deliberate support strip, not an empty blog/sidebar grid. */
.comic-page-heading {
  margin-bottom: .7rem;
  padding-top: .8rem;
  color: #302c27;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: .02em;
}
.comic-page-title {
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .045em;
}
.comic-page-date {
  color: #70685e;
  font-size: .78em;
  font-style: italic;
  letter-spacing: 0;
}
.comic-page-separator { color: #9b948a; }

.comic-support {
  max-width: var(--site-max);
  margin: 1.15rem auto 0;
  padding: 1.5rem 50px 1.65rem;
  background: var(--surface);
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
}
.comic-support-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem 2rem;
  align-items: center;
}
.comic-support .widget { margin: 0; min-width: 0; }
.comic-support .widget-content { padding: 0; }
.comic-support .widget-title {
  margin: 0 0 .55rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.comic-support img { display: block; max-width: 100%; height: auto; }
.comic-support p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .comic-page-heading { font-size: 1rem; }
  .comic-support { padding-left: .65rem; padding-right: .65rem; }
}
@media (max-width: 560px) {
  .comic-page-heading { font-size: .95rem; }
  .comic-page-separator { display: none; }
  .comic-page-date { display: block; margin-top: .18rem; }
  .comic-support-inner { grid-template-columns: 1fr; }
}


/* v6.4: make the comic heading unmistakably a heading. */
.comic-reader .comic-page-heading {
  font-size: 1.35rem !important;
  line-height: 1.25;
  margin-bottom: .8rem;
}
.comic-reader .comic-page-title {
  font-size: 1em !important;
  font-weight: 600;
}
.comic-reader .comic-page-date {
  font-size: .72em !important;
}
@media (max-width: 900px) {
  .comic-reader .comic-page-heading { font-size: 1.2rem !important; }
}
@media (max-width: 560px) {
  .comic-reader .comic-page-heading { font-size: 1.1rem !important; }
}

/* v6.5: secondary top navigation, optional notes, native sharing and editorial promotions. */
.comic-reader .comic-page-heading { scroll-margin-top: .65rem; }
.comic-reader .comic-nav-top {
  max-width: var(--comic-max);
  margin: 0 auto .8rem;
  border: 0;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .1rem .65rem;
}
.comic-reader .comic-nav-top > a,
.comic-reader .comic-nav-top > span {
  display: inline-flex;
  min-height: 2rem;
  padding: .15rem .25rem;
  border: 0;
  background: transparent;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.comic-reader .comic-nav-top > a:hover,
.comic-reader .comic-nav-top > a:focus-visible { text-decoration: underline; background: transparent; }
.comic-reader .comic-nav-top > .is-disabled { opacity: .6 !important; }
.comic-notes-section { margin-top: 1.35rem; }
.bm-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 1rem 0 .75rem;
  font-size: .86rem;
  line-height: 1.5;
}
.bm-share-label { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #5b554e; }
.bm-share-row button {
  border: 0;
  border-bottom: 1px solid #b8afa3;
  border-radius: 0;
  padding: .1rem 0;
  background: transparent;
  color: #302c27;
  font-size: .86rem;
  cursor: pointer;
}
.bm-share-row button:hover,
.bm-share-row button:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.bm-share-row button[hidden] { display: none; }
.bm-promotions {
  max-width: var(--site-max);
  margin: 1.2rem auto 0;
  padding: 1.45rem 50px 1.65rem;
  background: var(--surface);
  border-top: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
}
.bm-promotions-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.bm-promo { min-width: 0; }
.bm-promo + .bm-promo { border-left: 1px solid var(--paper-rule); padding-left: 2rem; }
.bm-promo-image-link { display: block; color: inherit; text-decoration: none; }
.bm-promo-image { display: block; width: 100%; aspect-ratio: 7 / 3; object-fit: contain; object-position: left center; margin-bottom: .8rem; }
.bm-promo h2 {
  margin: 0 0 .35rem;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.08rem;
  font-variant: small-caps;
  letter-spacing: .045em;
  line-height: 1.3;
}
.bm-promo-content { color: #504a43; font-size: .84rem; line-height: 1.5; }
.bm-promo-content p { margin: 0 0 .65rem; }
.bm-promo-content p:last-child { margin-bottom: 0; }
.bm-promo-content a { color: var(--accent); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.bm-promo-content a:hover, .bm-promo-content a:focus-visible { text-decoration-thickness: 2px; }
@media (max-width: 900px) { .bm-promotions { padding-left: .85rem; padding-right: .85rem; } }
@media (max-width: 560px) {
  .comic-reader .comic-nav-top { padding: 0 .65rem; gap: .15rem .55rem; }
  .comic-reader .comic-nav-top > a, .comic-reader .comic-nav-top > span { font-size: .6rem; }
  .bm-promotions-inner { grid-template-columns: 1fr; gap: 1.3rem; }
  .bm-promo + .bm-promo { border-left: 0; border-top: 1px solid var(--paper-rule); padding-left: 0; padding-top: 1.3rem; }
}

/* v6.7: compact publication identity + contextual series / story title. */
.site-header .header-inner:has(.bm-story-identity) {
  max-width: var(--site-max); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding: .65rem clamp(.8rem, 3vw, 2rem);
}
.site-header .header-inner:has(.bm-story-identity) .site-branding img { width: 100%; height: auto; max-height: 150px; object-fit: contain; object-position: left center; }
.bm-story-identity { min-width: 0; border-left: 1px solid var(--paper-rule); padding: .5rem 0 .5rem clamp(1rem, 2.5vw, 2rem); display: flex; flex-direction: column; justify-content: center; }
.bm-story-kicker { font-family: Georgia, serif; color: #766c60; font-size: .67rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .3rem; }
.bm-story-title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.15rem, 2.5vw, 1.85rem); line-height: 1.13; letter-spacing: .015em; font-variant: small-caps; color: #29241f; overflow-wrap: anywhere; }
.bm-story-subtitle { font-family: Georgia, serif; font-size: clamp(.85rem, 1.7vw, 1.12rem); color: #665c52; margin-top: .3rem; font-style: italic; }
.bm-story-graphic { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; object-position: left center; }
@media (max-width: 600px) {
  .site-header .header-inner:has(.bm-story-identity) { grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: .5rem .8rem; }
  .site-header .header-inner:has(.bm-story-identity) .site-branding img { max-height: 90px; }
  .bm-story-identity { border-left: 0; border-top: 1px solid var(--paper-rule); padding: .5rem 0 .25rem; }
  .bm-story-title { font-size: 1.3rem; }
  .bm-story-graphic { max-height: 100px; }
}

/* v6.8: publisher's mark (180px) + 760 x 180 series-artwork stage.
   Artwork master: 1520 x 360px, 2x. Live chapter-title exclusion zone:
   The live chapter title is centred in the lower strap area (y≈250..350).
   Its type is approximately 30 CSS px at 760px display width; artwork
   and any strap are supplied by the artist, not drawn by the theme. */
.site-header .header-inner:has(.bm-story-identity) {
  width: 100%; max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 180px minmax(0, 760px);
  gap: 20px; padding: 0 10px; align-items: center;
}
.site-header .header-inner:has(.bm-story-identity) .site-branding {
  width: 180px; max-width: 100%;
}
.site-header .header-inner:has(.bm-story-identity) .site-branding img {
  display: block; width: 100%; height: auto; max-height: 180px;
  object-fit: contain; object-position: center;
}
.bm-story-identity {
  position: relative; isolation: isolate; display: block;
  width: 100%; max-width: 760px; aspect-ratio: 38 / 9;
  border: 0; padding: 0; min-width: 0;
}
.bm-series-artwork {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
.bm-story-graphic {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: none;
  object-fit: contain; object-position: center;
}
.bm-series-artwork .bm-story-title {
  display: block; text-align: center; max-width: 100%; padding: 0 4% 22%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.4rem, 4vw, 2.75rem); line-height: 1.1;
  font-variant: small-caps; color: #29241f;
}
.bm-chapter-title-zone {
  position: absolute; left: 4%; width: 92%; bottom: 6.1%; height: 27.8%;
  display: flex; justify-content: center; align-items: center;
  text-align: center; z-index: 1;
}
.bm-chapter-title-zone .bm-story-subtitle {
  display: block; max-width: 100%; color: #29241f;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(.75rem, 3.947vw, 1.875rem); line-height: 1.05;
  white-space: nowrap;
  font-style: normal; margin: 0; overflow-wrap: anywhere;
  text-decoration: none;
}
.bm-chapter-title-zone a.bm-story-subtitle:hover,
.bm-chapter-title-zone a.bm-story-subtitle:focus-visible {
  text-decoration: underline; text-underline-offset: .15em;
}
.bm-series-start-link { position: absolute; inset: 0; z-index: 2; }
.bm-series-start-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 650px) {
  .site-header .header-inner:has(.bm-story-identity) {
    grid-template-columns: minmax(0, 1fr); gap: .3rem;
    padding: .5rem .8rem;
  }
  .site-header .header-inner:has(.bm-story-identity) .site-branding {
    width: min(135px, 34vw); margin: 0 auto;
  }
  .site-header .header-inner:has(.bm-story-identity) .site-branding img { max-height: 135px; }
  .bm-story-identity { max-width: 760px; margin: 0 auto; border: 0; padding: 0; }
  .bm-chapter-title-zone .bm-story-subtitle { font-size: clamp(.65rem, 3.947vw, 1.875rem); }
  .bm-series-artwork .bm-story-title { font-size: clamp(1.15rem, 5vw, 2.2rem); }
}
\n\n/* v6.12: editorial text fallback for chapters without artwork. */
.bm-story-identity.is-text-fallback {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 5%;
}
.bm-fallback-lockup {
  width: 100%; text-align: center; color: #211d19;
  font-family: Georgia, 'Times New Roman', serif;
}
.bm-fallback-series,
.bm-fallback-story { display: block; color: inherit; text-decoration: none; }
.bm-fallback-series {
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: .95; letter-spacing: .105em; text-transform: uppercase;
  font-weight: 400;
}
.bm-fallback-story {
  margin-top: .55rem;
  font-size: clamp(1rem, 2.35vw, 1.85rem);
  line-height: 1.08; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 400;
}
.bm-story-identity.is-text-fallback .bm-fallback-series:only-child {
  font-size: clamp(2rem, 5.5vw, 4.6rem);
  line-height: 1; letter-spacing: .09em;
}
.bm-fallback-series:hover,
.bm-fallback-series:focus-visible,
.bm-fallback-story:hover,
.bm-fallback-story:focus-visible {
  color: var(--accent); text-decoration: none;
}
@media (max-width: 650px) {
  .bm-story-identity.is-text-fallback { min-height: 0; padding: .7rem 4%; }
  .bm-fallback-series { font-size: clamp(1.55rem, 9vw, 2.7rem); letter-spacing: .07em; }
  .bm-fallback-story { font-size: clamp(.85rem, 4.8vw, 1.35rem); letter-spacing: .12em; margin-top: .4rem; }
  .bm-story-identity.is-text-fallback .bm-fallback-series:only-child { font-size: clamp(1.7rem, 10vw, 3rem); }
}

/* v6.14: centre legacy comic artwork narrower than the 880px maximum.
   Comic Easel may wrap the image in its own legacy containers, so centre
   the rendered artwork itself rather than relying on the outer reader. */
.bm-comic-image,
.bm-comic-image #comic-wrap,
.bm-comic-image .comic-table {
  width: 100% !important;
  max-width: var(--comic-max);
  margin-left: auto !important;
  margin-right: auto !important;
}
.bm-comic-image img {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* v6.16: front-page marginalia and final colophon. */
.site-sidebar {
  font-size: .88rem;
  line-height: 1.55;
}
.site-sidebar .widget {
  margin-bottom: 2.35rem;
  padding-top: 0;
}
.site-sidebar .widget-content > img:first-child,
.site-sidebar .widget-content > figure:first-child,
.site-sidebar .widget-content > .wp-block-image:first-child {
  margin-top: 0;
}
.site-sidebar .widget-title {
  margin-top: .85rem;
  margin-bottom: .72rem;
  font-size: .72rem;
}
.site-sidebar p { margin: 0 0 .78rem; }
.site-sidebar p:last-child { margin-bottom: 0; }
/* Keep Still to come quieter than the promotional/editorial modules. */
.site-sidebar h6 {
  margin-bottom: .42rem;
  font-size: .74rem;
  line-height: 1.4;
}
.site-sidebar h6 em { font-size: .61rem; }

.site-footer { margin-top: 2.5rem; }
.footer-inner {
  padding-top: 1.15rem;
  padding-bottom: 1.6rem;
  text-align: center;
  font-size: .76rem;
  line-height: 1.55;
}
.footer-nav { margin-bottom: .5rem; }
.footer-nav ul { justify-content: center; gap: .45rem 1rem; }
.footer-nav a { text-underline-offset: .14em; }
.footer-colophon { margin: 0; color: var(--muted); }

/* v6.17: final responsive release-candidate fixes. */
.bm-mobile-publication-strap { display: none; }

@media (max-width: 760px) {
  /* Once the front-page sidebar drops below the posts, keep its widgets in
     one editorial column rather than retaining the desktop widget grid. */
  .site-sidebar {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .site-sidebar .widget { width: 100%; }

  /* Match the comfortable inset used by ordinary posts. */
  .comic-notes-section {
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 650px) {
  /* On small screens the square publisher's mark becomes a shallow live-text
     imprint strap; the current-series masthead remains the visual event. */
  .site-header .header-inner:has(.bm-story-identity) .site-branding { display: none; }
  .site-header .header-inner:has(.bm-story-identity) .bm-mobile-publication-strap {
    display: block;
    width: 100%;
    margin: 0;
    padding: .38rem .15rem .45rem;
    border-bottom: 1px solid var(--paper-rule);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .105em;
    text-transform: uppercase;
    color: #171717;
  }
  .bm-mobile-publication-strap a { color: inherit; text-decoration: none; }
  .bm-mobile-publication-strap .bm-mobile-byline {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .09em;
  }
  .site-header .header-inner:has(.bm-story-identity) {
    gap: .45rem;
    padding-top: .35rem;
  }
}