/*
 * Manuscript treatment (TEST — see technical/design-philosophy.md,
 * "Open: separation idiom")
 *
 * The content of each page becomes one sheet of cream paper carrying a soft
 * warm shadow, resting on a slightly deeper desk. The header, navigation,
 * sidebar, and footer sit on the desk and recede naturally.
 *
 * Page coverage:
 * - Article pages: the article element is the sheet; sidebar sits on the desk.
 * - Homepage and collection pages: a .sheet wrapper div in the template.
 * - Static pages and /me: the existing article element is the sheet.
 * - Search: NOT yet covered — its filter-sidebar layout needs its own pass.
 *
 * Constraints (from the philosophy doc):
 * - The sheet keeps --color-bg; it is the desk that darkens. In dark mode
 *   the relationship inverts: the desk is lighter, the sheet stays as-is,
 *   so the article reads as the darker focal plane.
 * - Gently rounded corners, no border line around the sheet.
 * - On narrow screens the sheet goes full-bleed and the desk disappears.
 *
 * To remove the test: delete this file, its link in templates/base.html,
 * the .sheet wrapper divs in templates/home.html and collection.html, and
 * the --color-desk / --shadow-sheet tokens in variables.css.
 */

/* The desk: page background on covered page types */
body.page-article,
body.page-home,
body.page-collection,
body.page-static,
body.page-me {
    background: var(--color-desk);
}

/* The sheet. Paper texture (--texture-paper) is SVG noise grain layered
   over the background colour — see variables.css. */
.article-layout > article,
.static-page > article,
.home > .sheet,
.collection > .sheet {
    background-color: var(--color-bg);
    background-image: var(--texture-paper);
    box-shadow: var(--shadow-sheet);
    padding: var(--space-xl);
    border-radius: 8px;
}

/* The sidebar scrolls away with the article rather than following the
   reader (overrides the sticky positioning in sidebar.css). With the
   article on a sheet, a pinned sidebar draws too much attention to
   itself — the notes should stay where they were laid on the desk. */
body.page-article .sidebar {
    position: static;
}

/* Widen the content grid column by the sheet's horizontal padding so the
   text inside the sheet keeps the full reading width. Overrides the
   grid-template-columns set in layout.css (this file loads after it). */
@media (min-width: 1000px) {
    .article-layout,
    .home,
    .static-page,
    .collection {
        grid-template-columns: minmax(0, calc(var(--reading-width) + 2 * var(--space-xl))) 220px;
    }
}

/* Between full-bleed and the wide grid, layout.css caps direct children of
   non-article pages at --reading-width; widen the sheet by its padding so
   the text inside keeps the full reading width. */
@media (min-width: 721px) and (max-width: 999px) {
    .home > .sheet,
    .collection > .sheet,
    .static-page > article {
        max-width: calc(var(--reading-width) + 2 * var(--space-xl));
    }
}

/* Narrow screens: full bleed. The sheet fills the viewport, the desk
   disappears, and pages read exactly as they did before this test. */
@media (max-width: 720px) {
    body.page-article,
    body.page-home,
    body.page-collection,
    body.page-static,
    body.page-me {
        background: var(--color-bg);
    }

    .article-layout > article,
    .static-page > article,
    .home > .sheet,
    .collection > .sheet {
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
    }
}