/* Serialbook reader — T2 layout.
   Palette and metrics are fixed by docs/T2-READER-SPEC.md. Deliberately NOT warm
   cream paper and NOT terracotta: the page is a cool "desk", the chapter a lighter
   "sheet". Service layer (paragraph numbers, marginalia, metadata) is mono. */

:root {
    --desk: #dfe5e4;
    --sheet: #f8faf9;
    --ink: #151a17;
    --ink-soft: #5c645d;
    --rule: #c9d2d0;
    --pencil: #33648c;
    --pencil-wash: #dbe8f1;
    --stet: #6d7266;
    --flag: #8a352a;

    --col-no: 3.5rem;
    --col-prose: 34rem;
    --col-margin: 15rem;
    --gap: 2rem;

    --prose-font: Literata, Georgia, "Times New Roman", serif;
    --mono-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* @font-face lives in partials/fonts.hbs so every font URL passes through the
   {{asset}} helper and carries the theme version (see that file). */


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--desk);
    color: var(--ink);
    font-family: var(--prose-font);
    font-size: 17px;
    line-height: 1.62;
}

a { color: var(--pencil); }

/* --- accessibility: always-visible focus ring, honour reduced motion --- */
:focus-visible {
    outline: 2px solid var(--pencil);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 20;
    background: var(--sheet);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
}

/* --- chrome --- */
.site-head,
.site-foot {
    max-width: calc(var(--col-no) + var(--col-prose) + var(--col-margin) + var(--gap) * 2);
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.site-head__title {
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}
.site-head__desc,
.site-foot p {
    font-family: var(--mono-font);
    font-size: 11px;
    color: var(--ink-soft);
    margin: 0.35rem 0 0;
}
.site-head__nav {
    margin-top: 0.75rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.site-head__link {
    font-family: var(--mono-font);
    font-size: 11.5px;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.site-head__link:hover {
    color: var(--pencil);
    border-bottom-color: var(--pencil-wash);
}
.site-main { padding: 0 1rem 4rem; }

.btn {
    display: inline-block;
    font-family: var(--mono-font);
    font-size: 11.5px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--pencil);
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--pencil);
}
.btn--solid { background: var(--pencil); color: #fff; }
.btn--quiet { border-color: var(--rule); color: var(--ink-soft); }

/* --- book page --- */
.book {
    max-width: calc(var(--col-prose) + var(--col-margin));
    margin: 0 auto;
}
.book__title { font-size: 1.8rem; margin: 0 0 0.25rem; }
.book__subtitle { color: var(--ink-soft); margin: 0 0 2rem; }

.chapters { list-style: none; margin: 0; padding: 0; }
.chapters__item {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}
.chapters__no,
.chapters__state,
.chapters__date {
    font-family: var(--mono-font);
    font-size: 11px;
    color: var(--ink-soft);
}
.chapters__title { font-size: 1.05rem; }
.chapters__item--expected .chapters__title { color: var(--ink-soft); }
.chapters__state--open { color: var(--pencil); }
.chapters__state--early { color: var(--ink); }
.chapters__state--expected { color: var(--stet); }
.chapters__date { grid-column: 3; }
.chapters__empty { font-family: var(--mono-font); font-size: 11px; color: var(--ink-soft); }

/* --- chapter --- */
.chapter {
    max-width: calc(var(--col-no) + var(--col-prose) + var(--col-margin) + var(--gap) * 2);
    margin: 0 auto;
}
.chapter__changed {
    background: var(--pencil-wash);
    border-left: 2px solid var(--pencil);
    font-family: var(--mono-font);
    font-size: 11.5px;
    padding: 0.6rem 0.8rem;
    margin: 0 0 1.5rem;
}
.chapter__head { margin: 1rem 0 1.5rem; }
.chapter__meta {
    font-family: var(--mono-font);
    font-size: 11px;
    color: var(--ink-soft);
    margin: 0 0 0.5rem;
}
.chapter__meta-sep { opacity: 0.5; margin: 0 0.4rem; }
.chapter__title { font-size: 1.9rem; line-height: 1.2; margin: 0; }
.chapter__standfirst { color: var(--ink-soft); margin: 0.6rem 0 0; }

/* The sheet holds the three columns: paragraph number | prose | margin. */
.sheet {
    display: grid;
    grid-template-columns: var(--col-no) var(--col-prose) var(--col-margin);
    gap: var(--gap);
    background: var(--sheet);
    border: 1px solid var(--rule);
    box-shadow: 0 1px 3px rgba(21, 26, 23, 0.06);
    padding: 2.5rem 2rem;
}
/* Prose occupies the middle column; the number column is drawn from each
   paragraph's own data attribute, so numbering needs no extra markup and no JS. */
.prose {
    grid-column: 2;
    /* measure 65–75 characters */
    max-width: 72ch;
}
.margin { grid-column: 3; }

.prose > * { position: relative; margin: 0 0 1.15em; }
.prose > h2, .prose > h3 { font-weight: 600; line-height: 1.3; margin-top: 1.8em; }
.prose blockquote {
    border-left: 2px solid var(--rule);
    padding-left: 1rem;
    color: var(--ink-soft);
    font-style: italic;
}

/* ¶N — server-rendered value, mono, right-aligned, dim. */
.prose > [data-paragraph-no]::before {
    content: "¶" attr(data-paragraph-no);
    position: absolute;
    left: calc(-1 * (var(--col-no) + var(--gap)));
    width: var(--col-no);
    text-align: right;
    font-family: var(--mono-font);
    font-size: 11px;
    line-height: 1.9;
    color: var(--ink-soft);
    opacity: 0.75;
    user-select: none;
}
.prose > [data-paragraph-no]:target,
.prose > [data-paragraph-no].is-highlighted {
    background: var(--pencil-wash);
    box-shadow: -0.4rem 0 0 var(--pencil-wash), 0.4rem 0 0 var(--pencil-wash);
}

/* Accepted edit: the fragment is underlined with a thin pencil-wash line and
   carries a superscript reader number. */
.prose .accepted {
    text-decoration: underline;
    text-decoration-color: var(--pencil-wash);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}
.prose .accepted__reader {
    font-family: var(--mono-font);
    font-size: 9px;
    vertical-align: super;
    color: var(--pencil);
    margin-left: 1px;
}

/* --- marginalia --- */
.note {
    font-family: var(--mono-font);
    font-size: 11px;
    line-height: 1.5;
    border-left: 2px solid var(--rule);
    padding: 0 0 0 0.6rem;
    margin: 0 0 1.25rem;
    cursor: pointer;
    background: none;
    text-align: left;
}
.note--pending, .note--accepted { border-left-color: var(--pencil); color: var(--pencil); }
.note--stet { border-left-color: var(--stet); color: var(--stet); }
.note--flag { border-left-color: var(--flag); color: var(--flag); }
.note__glyph { font-size: 12px; margin-right: 0.3rem; }
.note__stet { font-weight: 600; letter-spacing: 0.06em; margin-right: 0.3rem; }
.note__body { margin: 0.2rem 0; color: inherit; }
.note__sign, .note__count { margin: 0.2rem 0 0; opacity: 0.75; }

/* --- gated boundary --- */
.boundary {
    max-width: calc(var(--col-prose) + var(--col-no) + var(--gap));
    margin: 2rem auto 0;
    background: var(--sheet);
    border: 1px solid var(--rule);
    padding: 1.75rem;
}
.boundary__title { font-size: 1.2rem; margin: 0 0 0.75rem; }
.boundary__list { margin: 0 0 1rem; padding-left: 1.1rem; }
.boundary__calm,
.boundary__signin {
    font-family: var(--mono-font);
    font-size: 11px;
    color: var(--ink-soft);
}
.boundary__signin { margin-bottom: 0; }

/* --- selection popover + overlays --- */
.popover {
    position: absolute;
    z-index: 12;
    display: flex;
    gap: 0.25rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    box-shadow: 0 2px 6px rgba(21, 26, 23, 0.12);
    padding: 0.25rem;
}
.popover__btn {
    font-family: var(--mono-font);
    font-size: 11px;
    border: 0;
    background: none;
    color: var(--pencil);
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}
.overlay-dim {
    position: fixed;
    inset: 0;
    background: rgba(21, 26, 23, 0.35);
    z-index: 13;
}
/* Opens BELOW the paragraph; prose stays visible behind the dim. */
.overlay {
    position: absolute;
    z-index: 14;
    width: min(34rem, calc(100vw - 2rem));
    background: var(--sheet);
    border: 1px solid var(--rule);
    box-shadow: 0 4px 14px rgba(21, 26, 23, 0.18);
    padding: 1.25rem;
}
.overlay__title { font-size: 1.05rem; margin: 0 0 0.75rem; }
.overlay__label {
    display: block;
    font-family: var(--mono-font);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin-bottom: 0.25rem;
}
.overlay__bounds {
    display: block;
    font-family: var(--mono-font);
    font-size: 11px;
    background: var(--pencil-wash);
    border-left: 2px solid var(--pencil);
    padding: 0.4rem 0.6rem;
}
.overlay__bounds::before { content: "«"; }
.overlay__bounds::after { content: "»"; }
.overlay__field { display: block; margin: 0.9rem 0; border: 0; padding: 0; }
.overlay__field textarea {
    width: 100%;
    font-family: var(--prose-font);
    font-size: 15px;
    border: 1px solid var(--rule);
    background: #fff;
    padding: 0.5rem;
}
.overlay__field label {
    font-family: var(--mono-font);
    font-size: 11px;
    margin-right: 0.75rem;
}
.overlay__promise {
    font-family: var(--mono-font);
    font-size: 10.5px;
    color: var(--ink-soft);
}
.overlay__actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

/* --- preview page (all states side by side) --- */
.preview__note {
    font-family: var(--mono-font);
    font-size: 11px;
    background: var(--pencil-wash);
    border-left: 2px solid var(--pencil);
    padding: 0.6rem 0.8rem;
    margin-bottom: 2rem;
}
.preview__state { margin: 0 0 3rem; }
.preview__state > h2 {
    font-family: var(--mono-font);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.35rem;
}

/* --- responsive: ≤1080px margin column disappears, notes go under paragraphs;
       ≤560px the grid compresses but paragraph numbers stay. --- */
@media (max-width: 1080px) {
    .sheet {
        grid-template-columns: var(--col-no) minmax(0, 1fr);
        padding: 2rem 1.25rem;
    }
    .prose { grid-column: 2; max-width: 100%; }
    .margin { grid-column: 2; }
    .note { margin-top: 0.5rem; }
    .prose > [data-paragraph-no] > .note-inline { display: block; }
}
@media (max-width: 560px) {
    :root { --col-no: 2.25rem; --gap: 0.75rem; }
    body { font-size: 16px; }
    .sheet { padding: 1.25rem 0.85rem; }
    .prose > [data-paragraph-no]::before {
        font-size: 10px;
        left: calc(-1 * (var(--col-no) + var(--gap)));
    }
    .chapters__item { grid-template-columns: 1fr auto; }
    .chapters__no { grid-column: 1; }
    .chapters__date { display: none; }
}

/* Koenig card widths (required by Ghost/gscan): images and embeds may break out of
   the prose measure without breaking the three-column grid. */
.prose .kg-width-wide {
    width: min(calc(var(--col-prose) + 6rem), 100%);
    margin-left: -3rem;
}
.prose .kg-width-full {
    width: min(calc(var(--col-prose) + var(--col-margin) + var(--gap)), 100%);
    margin-left: -3rem;
}
.prose figure { margin: 1.5rem 0; }
.prose figcaption {
    font-family: var(--mono-font);
    font-size: 10.5px;
    color: var(--ink-soft);
    text-align: center;
}

/* Ghost's own English CTA is removed from the RESPONSE by the empty
   `partials/content-cta.hbs`, which overrides the built-in card — not by hiding it
   here. These rules stay only as a safety net for a Ghost version that ignores the
   partial; the served HTML must contain our Ukrainian boundary and nothing else. */
.prose .gh-post-upgrade-cta,
.prose .gh-post-upgrade-cta-content { display: none !important; }