/* Article controls stay available in both layouts. */
.reading-tools[hidden], .reader-heading, .reader-back { display: none; }
.post-content-area { min-width: 0; padding-top: 6rem; }
.reading-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; font: 500 .85rem/1.4 var(--font-sans); position: relative; z-index: 220; }
.reading-tools button, .reading-tools summary, .reader-back { min-height: 44px; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font: inherit; cursor: pointer; }
.reading-tools button:hover, .reading-tools summary:hover { border-color: var(--accent); }
.reading-tools :is(button, summary, select, input, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reader-toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.reader-settings { position: relative; }
.reader-settings summary { display: flex; align-items: center; gap: .5rem; list-style: none; }
.reader-settings summary::-webkit-details-marker { display: none; }
.reader-settings summary::after { content: '⌄'; }
.reader-settings[open] summary::after { content: '⌃'; }
.reader-settings__panel { position: absolute; top: calc(100% + .5rem); left: 0; width: 290px; max-width: calc(100vw - 2.5rem); max-height: 65dvh; overflow-y: auto; padding: 1.2rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-md); }
.reader-settings__panel p { font-size: .8rem; color: var(--text-muted); margin: 0 0 1rem; }
.reader-settings__panel label { display: flex; justify-content: space-between; gap: 1rem; margin: .8rem 0 .3rem; }
.reader-settings__panel output { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.reader-settings__panel select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; padding: .5rem; }
.reader-settings__panel input { width: 100%; min-height: 30px; accent-color: var(--accent); }
.reader-settings__panel button { margin-top: .8rem; width: 100%; }

html.reader-mode { color-scheme: light !important; scroll-behavior: auto; }
html.reader-mode[data-reader-palette="dark"] { color-scheme: dark !important; }
.reader-mode body.has-post-layout {
    --bg: #f4eddf; --bg-reading: #f4eddf; --bg-card: #fffaf0; --bg-card-hover: #eee3d0;
    --text: #3b3329; --text-heading: #29231c; --text-muted: #6e604e;
    --accent: #74532a; --accent-hover: #503515; --on-accent: #fffaf0;
    --border: #d8cbb6; --border-light: #d8cbb6;
    --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --shadow-md: 0 8px 28px rgba(60, 40, 15, .12);
    color: var(--text); background: var(--bg);
}
.reader-mode[data-reader-palette="light"] body.has-post-layout {
    --bg: #fafafa; --bg-reading: #fafafa; --bg-card: #fff; --bg-card-hover: #eee;
    --text: #292d30; --text-heading: #161a1c; --text-muted: #62676a;
    --accent: #27654a; --accent-hover: #16442f; --on-accent: #fff;
    --border: #d8dcda; --border-light: #d8dcda;
}
.reader-mode[data-reader-palette="dark"] body.has-post-layout {
    --bg: #202321; --bg-reading: #202321; --bg-card: #2a2e2b; --bg-card-hover: #333a35;
    --text: #dddcd3; --text-heading: #eeeee5; --text-muted: #b1b8ae;
    --accent: #a7cdb0; --accent-hover: #c4e7cb; --on-accent: #17241b;
    --border: #444b45; --border-light: #444b45;
    --shadow-md: 0 8px 28px rgba(0, 0, 0, .3);
}
.reader-mode .has-post-layout :is(.site-appearance, .post-sideheader, .post-sideheader__topbar, .post-logo-fixed, .post-side-toggle, #arc-panel, #arc-eye-tab, #sidebar, #sidebar-overlay) { display: none !important; }
.reader-mode .post-layout, .reader-mode .post-layout.side-hidden { display: block; }
.reader-mode .post-content-area { padding: 1rem max(1.25rem, env(safe-area-inset-right)) 5rem; min-height: 100vh; }
.reader-mode .post-content-area > :is(.article-content, .reader-heading, .reading-tools, .post-content-footer, .admin-edit-bar) { max-width: var(--reader-width, 680px); margin-left: auto; margin-right: auto; }
.reader-mode .reading-tools { position: sticky; top: .5rem; padding: .4rem 0; background: var(--bg); z-index: 220; }
.reader-mode .reader-back { display: inline-flex; align-items: center; text-decoration: none; margin-left: auto; }
.reader-mode .reader-heading { display: block; margin-bottom: 2.5rem; }
.reader-mode .reader-heading h1 { color: var(--text-heading); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.18; margin: 0 0 1rem; }
.reader-mode .reader-heading :is(.post-sideheader__perex, .post-side__date, .post-side__tag) { color: var(--text-muted); display: block; }
.reader-mode .reader-heading .post-sideheader__meta { flex-wrap: wrap; }
.reader-mode .reader-heading .post-sideheader__perex { font-size: 1.05rem; line-height: 1.7; }
.reader-mode .post-content-area > .article-content { font-family: Georgia, 'Times New Roman', serif; font-size: var(--reader-size, 20px); line-height: var(--reader-line, 1.8); overflow-wrap: anywhere; }
.reader-mode[data-reader-font="sans"] .post-content-area > .article-content { font-family: var(--font-sans); }
.reader-mode .post-content-area .article-content :is(p, li, div, span, font) { font-size: inherit !important; line-height: inherit !important; color: inherit !important; background-color: transparent !important; }
.reader-mode .post-content-area .article-content p { margin-bottom: 1.25em; }
.reader-mode .post-content-area .article-content :is(h1, h2, h3, h4, h5) { color: var(--text-heading) !important; line-height: 1.3; font-family: inherit; scroll-margin-top: 6rem; }
.reader-mode .post-content-area .article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.reader-mode .post-content-area .article-content blockquote { color: var(--text-muted); }
.reader-mode .post-content-area .article-content :is(code, pre) { background: var(--bg-card-hover); color: var(--text); }
.reader-mode .post-content-area .article-content pre { overflow-x: auto; white-space: pre-wrap; }
.reader-mode .post-content-area .article-content table { display: block; max-width: 100%; overflow-x: auto; }
.reader-mode .post-content-area .article-content :is(img, video, iframe) { max-width: 100%; }
.reader-mode .post-content-area .article-content img { height: auto; }

@media (max-width: 700px) {
    .post-layout, .post-layout.side-hidden { display: block; }
    .post-sideheader { position: relative; height: auto; max-width: none; min-height: 280px; }
    .post-sideheader__overlay { min-height: 280px; padding: 7.5rem 1.25rem 1.5rem; }
    .post-sideheader__title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
    .post-sideheader__content { margin-top: 0; }
    .post-sideheader__perex { display: block; }
    .post-content-area { padding: 1.5rem 1.25rem 4rem; }
    .post-side-toggle { display: none; }
    .post-layout.side-hidden .post-sideheader { display: none; }
    .reader-settings { position: static; }
    .reader-settings__panel { left: 0; width: min(320px, calc(100vw - 2.5rem)); }
    .reader-mode .reader-back { padding-inline: .65rem; }
    .reading-tools { gap: .4rem; }
    .reading-tools button, .reading-tools summary { padding-inline: .7rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
    .reading-tools, .site-appearance, .post-sideheader, .post-sideheader__topbar, .post-logo-fixed, .post-side-toggle, #arc-panel, #arc-eye-tab { display: none !important; }
    .reader-heading { display: block; }
    .post-layout, .post-layout.side-hidden { display: block; }
    .post-content-area { padding: 0; }
}