@font-face { font-family:'Century Gothic Local'; src:url('fonts/century-gothic.woff') format('woff'); font-style:normal; font-weight:400; font-display:swap; }
:root { --site-bg:#444; --accent:#075a38; --panel:#dedede; --paper:#fff; --nav-bg:#ddd; --text-colour:#111; }
* { box-sizing:border-box; }
html { background:var(--site-bg); }
body { margin:0; font-family:'Century Gothic Local', 'Century Gothic', Arial, sans-serif; color:var(--text-colour); background:var(--site-bg); }
a { color:var(--accent); }
.site { width:min(1040px, 100%); margin:0 auto; background:var(--paper); }
.masthead img { display:block; width:100%; height:auto; }
.site-nav { padding:.2rem .75rem; text-align:center; background:var(--nav-bg); border-bottom:1px solid #333; font-size:1rem; font-style:italic; }
.site-nav a { text-decoration:none; }
.comic-nav { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; padding:.75rem 1rem; font-size:1.1rem; font-style:italic; }
.comic-nav a { text-decoration:none; }
.comic-nav .disabled { opacity:.25; cursor:default; }
.comic-wrap { padding:0 30px; text-align:center; }
.comic-wrap img { display:block; max-width:100%; width:auto; height:auto; margin:0 auto; }
.info { padding:1.5rem 30px 1.25rem; background:var(--panel); border-top:1px solid #555; }
.info h1 { margin:0 0 .9rem; font-size:1.35rem; font-weight:400; color:var(--accent); }
.info h1 a { text-decoration:none; }
.info .date { font-size:.9em; font-weight:400; }
.comment { max-width:900px; font-size:1rem; border-top:1px solid #aaa; padding-top:.9rem; line-height:1.55; }
.comment p { margin:.35rem 0 .8rem; }
.promos { width:min(980px, calc(100% - 60px)); margin:0 auto; }
.promos a, .promos img { display:block; width:100%; height:auto; }
.footer { padding:1rem; text-align:center; color:#fff; background:var(--site-bg); font-size:.8rem; }
@media (max-width: 1040px) {
  .comic-wrap { padding:0 20px; }
  .comic-wrap img { max-width:100%; }
  .info { padding-left:20px; padding-right:20px; }
  .promos { width:calc(100% - 40px); }
}
@media (max-width: 600px) {
  .comic-wrap { padding:0 10px; }
  .info { padding:1rem 12px; }
  .promos { width:calc(100% - 20px); }
  .comic-nav { gap:.45rem; font-size:1rem; }
}

/* Chapter selector sits below the lower comic navigation, outside the grey panel. */
.chapter-picker { display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.2rem 1rem 1.25rem; font-size:1.15rem; }
.chapter-picker label { color:var(--accent); }
.chapter-picker select { width:min(480px, 80vw); max-width:100%; font:inherit; padding:.5rem .65rem; border:1px solid #999; border-radius:4px; background:var(--paper); color:var(--text-colour); }
@media(max-width:600px) { .chapter-picker { flex-wrap:wrap; gap:.35rem; font-size:1rem; } }

/* Centred metadata, commentary and sharing inside the full-width grey panel. */
.info-inner { width:100%; max-width:800px; margin:0 auto; }
.info .chapter-title { margin:0 0 .65rem; font-size:1rem; font-weight:400; color:var(--text-colour); }
.info .chapter-title a { color:var(--text-colour); text-decoration:none; }
.info .chapter-title a:hover { color:var(--accent); text-decoration:underline; }
.info .comic-date { margin:0 0 .8rem; font-size:1.35rem; color:var(--accent); }
.comment-area { border-top:1px solid #aaa; padding-top:.75rem; }
.comment { max-width:none; border-top:0; padding-top:0; }
.share-tools { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.3rem; font-size:1rem; }
.share-tools button { font:inherit; color:var(--accent); background:none; border:0; padding:.25rem 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.share-tools button:hover { text-decoration:none; }
.share-tools button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.share-status { font-size:.9rem; }

/* v1.4.4: prominent chapter jump below comic, quiet chapter reference after notes. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chapter-picker { justify-content:center; padding: .5rem 1rem 1.5rem; }
.chapter-picker select { width:min(580px, calc(100vw - 40px)); font-size:1.25rem; padding:.65rem .85rem; }
.info .comic-date { color:var(--accent); font-size:1.35rem; }
.chapter-footnote { margin:1.1rem 0 0; font-size:.875rem; font-style:italic; line-height:1.5; }
.chapter-footnote a { color:var(--accent); text-decoration:none; }
.chapter-footnote a:hover { text-decoration:underline; }

/* v1.4.5 — definitive layout rules. */
.chapter-picker {
  display:flex;
  width:100%;
  justify-content:center;
  align-items:center;
  padding:1rem 1rem 1.5rem;
  text-align:center;
}
.chapter-picker select {
  display:block;
  width:min(580px, 100%);
  font-size:1.25rem;
  line-height:1.4;
  padding:.65rem .85rem;
  margin:0 auto;
}
.info-inner { width:100%; max-width:800px; margin-inline:auto; }
.info .comic-date {
  display:block;
  font-size:1.4rem;
  line-height:1.3;
  font-weight:400;
  color:var(--accent);
  margin:0 0 1rem;
}
.info .chapter-footnote {
  margin:1.2rem 0 0;
  font-size:.875rem;
  font-style:italic;
  font-weight:400;
}
.info .chapter-footnote a { color:var(--accent); text-decoration:none; }
.info .chapter-footnote a:hover { text-decoration:underline; }

/* v1.4.6: illustrated character profiles */
.characters-page { max-width:920px; margin:0 auto; padding:2rem 30px 3rem; }
.characters-page h1 { margin:0 0 1.5rem; color:var(--accent); font-size:2rem; font-weight:400; }
.character-profile { display:grid; grid-template-columns:250px minmax(0,1fr); gap:1.75rem; align-items:start; padding:1.5rem 0; border-top:1px solid #ccc; }
.character-profile img { display:block; width:250px; height:250px; max-width:100%; object-fit:cover; }
.character-profile h2 { color:var(--accent); font-size:1.25rem; margin:0 0 .75rem; }
.character-profile p { line-height:1.6; margin:0; font-size:1rem; }
@media (max-width:620px) { .characters-page { padding:1.5rem 18px 2rem; } .character-profile { grid-template-columns:1fr; gap:1rem; } }

/* v1.4.7: chapters index */
.chapters-page { max-width:920px; margin:0 auto; padding:2rem 30px 3rem; }
.chapters-page h1 { color:var(--accent); font-size:2rem; font-weight:400; margin:0 0 1.5rem; }
.chapter-entry { display:grid; grid-template-columns:160px minmax(0,1fr); gap:1.75rem; border-top:1px solid #ccc; padding:1.6rem 0; align-items:start; }
.chapter-cover img { display:block; width:160px; max-width:100%; height:auto; }
.chapter-entry h2 { font-size:1.4rem; font-weight:400; margin:0 0 .75rem; }
.chapter-entry h2 a { text-decoration:none; }
.chapter-entry p { margin:0 0 1rem; line-height:1.6; }
.chapter-read { font-size:.95rem; }
@media(max-width:600px) { .chapters-page { padding:1.5rem 18px 2rem; } .chapter-entry { grid-template-columns:105px minmax(0,1fr); gap:1rem; } .chapter-cover img { width:105px; } .chapter-entry h2 { font-size:1.15rem; } }

/* v1.4.8: About page */
.about-page { max-width:920px; margin:0 auto; padding:2rem 30px 3rem; line-height:1.65; }
.about-page h1 { color:var(--accent); font-size:2rem; font-weight:400; margin:0 0 1.5rem; }
.about-page h2 { color:var(--accent); font-size:1.4rem; font-weight:400; margin:2rem 0 .7rem; }
.about-page h3 { font-size:1.05rem; font-weight:600; margin:1.4rem 0 .4rem; }
.about-page p { margin:.5rem 0 1rem; }
.about-page ul { padding-left:1.5rem; }
.about-page li { margin:.35rem 0; }
@media(max-width:600px) { .about-page { padding:1.5rem 18px 2rem; } }

/* Keep tall or high-resolution masthead artwork at a sensible displayed size. */
.masthead img { width:auto; max-width:100%; max-height:140px; height:auto; margin-left:auto; margin-right:auto; }