/*
  Reading Styles — alternate visual presentations for blog articles.
  Loaded by blog.php only, after theme.css.

  Scope: every rule here targets html[data-reading-style="…"] combined
  with .post-article / .post-title / .post-byline / .article-reader
  (see blog.php). Site chrome — header, sidebar, modals, post-actions
  (share/edit/delete), footer — is never selected here, so switching
  reading style cannot touch navigation, admin controls, or backend
  behavior.

  "terminal" is intentionally absent below: it IS the site's current
  look, already fully defined in theme.css, so it needs zero rules to
  reproduce and can never drift from the base site style.

  Independence from the light/dark toggle:
  - Newspaper and Vintage are fixed, self-contained light palettes
    (an authentic newsprint/paper feel doesn't have a "dark" version),
    so their colors are hardcoded rather than pulled from the site's
    --bg/--text tokens. The one place the base theme forces a color
    with !important (.dark .article-body a) is matched here with an
    equally-!important, more specific override so link color stays
    correct even if a visitor also has dark mode on.
  - Modern reuses the site's existing --bg/--text/--muted/--accent
    tokens (already WCAG-audited for both schemes), so it automatically
    tracks light/dark and needs no such override — only its typography,
    spacing and measure change.
*/

/* ================= Reading Style control (page chrome) ================= */
.reading-style-control {
  position: relative;
  display: inline-block;
  font-family: var(--mono);
}

.reading-style-control summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .65rem;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.reading-style-control summary::-webkit-details-marker {
  display: none;
}

.reading-style-control summary:hover {
  border-color: var(--accent);
  color: var(--text);
}

.reading-style-control .rs-aa {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
}

.reading-style-control[open] summary {
  border-color: var(--accent);
  color: var(--text);
}

.reading-style-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.reading-style-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding: .55rem .75rem;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: .82rem;
  text-align: left;
  cursor: pointer;
}

.reading-style-options button:hover,
.reading-style-options button:focus-visible {
  background: var(--surface-2);
}

.reading-style-options button .rs-check {
  opacity: 0;
  color: var(--accent);
}

.reading-style-options button[aria-checked="true"] .rs-check {
  opacity: 1;
}

@media (max-width: 480px) {
  .reading-style-control .reading-style-label {
    display: none;
  }
}

/* ================= Newspaper ================= */
html[data-reading-style="newspaper"] {
  --rs-bg: #f2ede1;
  --rs-ink: #1b1a17;
  --rs-ink-soft: #2b2924;
  --rs-muted: #6b6355;
  --rs-border: #cdc3ac;
  --rs-link: #7a2222;
  --rs-code-bg: #e9e2cf;
  --rs-code-text: #40382a;
  --rs-font: Georgia, Cambria, "Times New Roman", Times, serif;
  --rs-measure: 660px;
}

html[data-reading-style="newspaper"] .post-article {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  padding: 2rem 2.25rem 2.5rem;
}

html[data-reading-style="newspaper"] .post-title,
html[data-reading-style="newspaper"] .post-meta,
html[data-reading-style="newspaper"] .article-reader {
  max-width: var(--rs-measure);
  margin-inline: auto;
}

html[data-reading-style="newspaper"] .post-title {
  font-family: var(--rs-font);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--rs-ink) !important;
}

html[data-reading-style="newspaper"] .post-title a {
  color: inherit;
}

html[data-reading-style="newspaper"] .post-meta {
  border-top: 1px solid var(--rs-border);
  border-bottom: 1px solid var(--rs-border);
  padding: .55rem 0;
  margin-top: .75rem;
}

html[data-reading-style="newspaper"] .post-byline {
  font-family: var(--rs-font);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rs-muted) !important;
}

html[data-reading-style="newspaper"] .post-byline img {
  filter: none;
}

html[data-reading-style="newspaper"] .article-body {
  font-family: var(--rs-font);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--rs-ink-soft);
}

html[data-reading-style="newspaper"] .article-body h1,
html[data-reading-style="newspaper"] .article-body h2,
html[data-reading-style="newspaper"] .article-body h3,
html[data-reading-style="newspaper"] .article-body h4 {
  font-family: var(--rs-font);
  color: var(--rs-ink);
  border-bottom: 1px solid var(--rs-border);
  padding-bottom: .3rem;
}

html[data-reading-style="newspaper"] .article-body a {
  color: var(--rs-link) !important;
  text-decoration-thickness: 1px;
}

html[data-reading-style="newspaper"] .article-body blockquote {
  border-left: 3px solid var(--rs-ink);
  color: var(--rs-muted);
}

html[data-reading-style="newspaper"] .article-body :not(pre) > code {
  background: var(--rs-code-bg);
  color: var(--rs-code-text);
  border-color: var(--rs-border);
}

html[data-reading-style="newspaper"] .article-body th,
html[data-reading-style="newspaper"] .article-body td {
  border-color: var(--rs-border);
}

html[data-reading-style="newspaper"] .article-body th {
  background: var(--rs-code-bg);
}

html[data-reading-style="newspaper"] .article-footer {
  border-top-color: var(--rs-border);
}

html[data-reading-style="newspaper"] .article-footer-label {
  color: var(--rs-muted);
}

html[data-reading-style="newspaper"] .article-footer .callout {
  background: transparent;
  border-color: var(--rs-border);
  color: var(--rs-ink-soft);
}

html[data-reading-style="newspaper"] .article-reader img {
  filter: none;
}

/* ================= Vintage ================= */
html[data-reading-style="vintage"] {
  --rs-bg: #f4ead0;
  --rs-ink: #3a2f22;
  --rs-muted: #7d6c4f;
  --rs-border: #ddc99a;
  --rs-link: #8a5a2b;
  --rs-code-bg: #ecdfbb;
  --rs-code-text: #4a3a22;
  --rs-font: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --rs-measure: 680px;
}

html[data-reading-style="vintage"] .post-article {
  background: var(--rs-bg);
  border: 1px solid var(--rs-border);
  padding: 2.25rem 2.5rem 2.75rem;
}

html[data-reading-style="vintage"] .post-title,
html[data-reading-style="vintage"] .post-meta,
html[data-reading-style="vintage"] .article-reader {
  max-width: var(--rs-measure);
  margin-inline: auto;
}

html[data-reading-style="vintage"] .post-title {
  font-family: var(--rs-font);
  font-weight: 700;
  color: var(--rs-ink) !important;
  border-bottom: 3px double var(--rs-border);
  padding-bottom: .5rem;
}

html[data-reading-style="vintage"] .post-title a {
  color: inherit;
}

html[data-reading-style="vintage"] .post-byline {
  font-family: var(--rs-font);
  font-style: italic;
  color: var(--rs-muted) !important;
  margin-top: .6rem;
}

html[data-reading-style="vintage"] .post-byline img {
  filter: none;
}

html[data-reading-style="vintage"] .article-body {
  font-family: var(--rs-font);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--rs-ink);
}

html[data-reading-style="vintage"] .article-body p {
  margin: 0 0 1.6em;
}

html[data-reading-style="vintage"] .article-body h1,
html[data-reading-style="vintage"] .article-body h2,
html[data-reading-style="vintage"] .article-body h3,
html[data-reading-style="vintage"] .article-body h4 {
  font-family: var(--rs-font);
  font-weight: 700;
  color: var(--rs-ink);
}

html[data-reading-style="vintage"] .article-body a {
  color: var(--rs-link) !important;
}

html[data-reading-style="vintage"] .article-body blockquote {
  border-left: 3px solid var(--rs-border);
  color: var(--rs-muted);
  font-style: italic;
  position: relative;
  padding-left: 1.5rem;
}

html[data-reading-style="vintage"] .article-body :not(pre) > code {
  background: var(--rs-code-bg);
  color: var(--rs-code-text);
  border-color: var(--rs-border);
}

html[data-reading-style="vintage"] .article-body th,
html[data-reading-style="vintage"] .article-body td {
  border-color: var(--rs-border);
}

html[data-reading-style="vintage"] .article-body th {
  background: var(--rs-code-bg);
}

html[data-reading-style="vintage"] .article-footer {
  border-top-color: var(--rs-border);
}

html[data-reading-style="vintage"] .article-footer-label {
  color: var(--rs-muted);
}

html[data-reading-style="vintage"] .article-footer .callout {
  background: transparent;
  border-color: var(--rs-border);
  color: var(--rs-ink);
}

html[data-reading-style="vintage"] .article-reader img {
  filter: none;
}

/* ================= Modern ================= */
/* Reuses the site's existing tokens (already audited for both light and
   dark) rather than a fixed palette, so it tracks the light/dark toggle
   automatically — only typography, spacing and measure change here. */
html[data-reading-style="modern"] {
  --rs-measure: 720px;
}

html[data-reading-style="modern"] .post-article {
  padding: 1.75rem 2rem 2.25rem;
  border: 1px solid var(--layout-divider);
}

html[data-reading-style="modern"] .post-title,
html[data-reading-style="modern"] .post-meta,
html[data-reading-style="modern"] .article-reader {
  max-width: var(--rs-measure);
  margin-inline: auto;
}

html[data-reading-style="modern"] .post-title {
  font-family: var(--font-reader);
  font-weight: 800;
  letter-spacing: -0.02em;
}

html[data-reading-style="modern"] .post-byline {
  font-family: var(--font-reader);
  letter-spacing: normal;
  text-transform: none;
}

html[data-reading-style="modern"] .article-body {
  font-family: var(--font-reader);
  font-size: 1.1rem;
  line-height: 1.85;
}

html[data-reading-style="modern"] .article-body p {
  margin: 0 0 1.4em;
}

html[data-reading-style="modern"] .article-body h1,
html[data-reading-style="modern"] .article-body h2,
html[data-reading-style="modern"] .article-body h3,
html[data-reading-style="modern"] .article-body h4 {
  font-family: var(--font-reader);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--accent);
  padding-left: .75rem;
}

html[data-reading-style="modern"] .article-body blockquote {
  font-family: var(--font-reader);
  font-size: 1.15em;
  font-style: italic;
  padding: .25em 0 .25em 1.5rem;
}

html[data-reading-style="modern"] .article-body :not(pre) > code {
  font-family: var(--mono);
}

/* ================= Responsive: card padding on small screens ================= */
@media (max-width: 640px) {
  html[data-reading-style="newspaper"] .post-article,
  html[data-reading-style="vintage"] .post-article,
  html[data-reading-style="modern"] .post-article {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}