/* =================================================================
 * 2. Reset & body
 * ================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--wp--preset--color--bg);
    color:            var(--wp--preset--color--text-primary);
    font-family:      var(--wp--preset--font-family--body);
    font-size:        var(--wp--preset--font-size--md);
    line-height:      var(--rhythm);
    letter-spacing:   var(--ls-normal);
    font-feature-settings: "kern", "liga", "onum", "calt";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
    color: var(--wp--preset--color--text-primary);
}

/* =================================================================
 * 3. Paper texture — fractal noise overlay, mode-aware blend
 * -----------------------------------------------------------------
 * Opacity scales with --proof-age-years (set inline by PHP on singular
 * views; defaults to 0 elsewhere). Each year past publish layers a
 * little more grain on top of the baseline, capped via min() so the
 * page still reads at extreme ages. Archives / home stay at baseline.
 * ================================================================= */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: min(0.7, calc(0.28 + var(--proof-age-years, 0) * 0.05));
    background-image: url("data:image/svg+xml,%3Csvg width='256' height='256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
    html::before {
        opacity: min(0.5, calc(0.2 + var(--proof-age-years, 0) * 0.03));
        mix-blend-mode: screen;
    }
}

/* =================================================================
 * 4. Registration frame — page-relative, scrolls with content
 * ================================================================= */
/* A faint hairline rectangle traces an inset frame around the whole page.
   Four registration crosses sit on the frame's corners. Both live on
   .wp-site-blocks pseudos so they scroll with the document (anchored to
   the page, not the viewport).

   ::before draws the connecting frame (border on an inset box).
   ::after draws the four corner crosses. Its box is intentionally 5px
   larger than the frame on each side so cross arms can extend past the
   corners without being clipped. */
.wp-site-blocks {
    position: relative;
    padding: var(--mark-inset);
}

.wp-site-blocks::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    background-image:
        linear-gradient(var(--wp--preset--color--line) 0 100%),
        linear-gradient(var(--wp--preset--color--line) 0 100%),
        linear-gradient(var(--wp--preset--color--line) 0 100%),
        linear-gradient(var(--wp--preset--color--line) 0 100%);
    background-size:
        100% 1px, 100% 1px,
        1px 100%, 1px 100%;
    background-position:
        left 0 top    var(--mark-inset),
        left 0 bottom var(--mark-inset),
        top  0 left   var(--mark-inset),
        top  0 right  var(--mark-inset);
    background-repeat: no-repeat;
}

.wp-site-blocks::after {
    content: "";
    position: absolute;
    top:    calc(var(--mark-inset) - 5px);
    right:  calc(var(--mark-inset) - 5px);
    bottom: calc(var(--mark-inset) - 5px);
    left:   calc(var(--mark-inset) - 5px);
    pointer-events: none;
    z-index: 9997;
    background-image:
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%),
        linear-gradient(var(--wp--preset--color--mark) 0 100%);
    background-size:
        10px 1px, 1px 10px,
        10px 1px, 1px 10px,
        10px 1px, 1px 10px,
        10px 1px, 1px 10px;
    background-repeat: no-repeat;
    background-position:
        top    4.5px left   0,        top    0      left   4.5px,
        top    4.5px right  0,        top    0      right  4.5px,
        bottom 4.5px left   0,        bottom 0      left   4.5px,
        bottom 4.5px right  0,        bottom 0      right  4.5px;
}