/**
 * Page layout — top padding reserving space for the fixed header, plus the
 * fixed vertical side labels injected by site-page.php.
 *
 * Padding values calqued from react-src components/single-page:
 *   mobile  : padding: (2×sm.margin + sm.menuHeight) 0 → 19.78vw 6.03vw
 *   desktop : padding: (2×md.verticalMargin + md.menuHeight) 0 → 6.18vw 3.02vw
 *   hero md : padding: (18.27 + md.verticalMargin) 0 → 20.11vw 3.02vw
 *
 * The horizontal padding is INSET via body's --page-gutter (site-base.css),
 * so here we only set the vertical top offset.
 *
 * Works-list rows and the 404 screen live in their own stylesheets
 * (works-list.css, site-404.css) for scoping clarity.
 */

:root {
    /* Top padding aligned with the burger button's bottom edge so there's
     * no white gap between the fixed header/burger row and the page
     * content below. The header is sized to match (see site-header.css)
     * so the logo on the left and the burger on the right both end at
     * exactly --site-nav-burger-size from the top. */
    --site-page-top: var(--site-nav-burger-size);
}

.site-page {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding-top: var(--site-page-top);
}

/* Homepage: reserve exactly the space taken by the fixed hero home-logo.
 *
 * Mirrors react-src `.SinglePageContainer.hero { padding-top: (18.27 + verticalMargin)vw }`
 * = 18.27 + 1.84 = **20.11vw**. The 18.27 is a hand-tuned value in react-src
 * that approximates the wordmark's visual height + a small inset; the trailing
 * `+ verticalMargin` is the breathing room before the first content block.
 * Hardcoded here rather than re-derived from `--site-header-pad-y` /
 * `--site-header-logo-h` because those carry `clamp()`s for the static-header
 * use-case (mobile readability), and the clamps were eating ~2vw off our
 * computed value at typical desktop widths — leaving a too-small gap below
 * the hero logo. Two divergent concerns, two separate values.
 *
 * Scoped to desktop: on mobile we hide the .home-logo (mirror react-src's
 * StaticLogo), so the hero padding isn't needed and the regular
 * --site-page-top (sized for the small static header logo) takes over. */
@media (min-width: 769px) {
    .site-page--hero {
        --site-page-top: 20.11vw;
    }
}

/* Mobile inherits the same `--site-page-top: var(--site-nav-burger-size)`
 * from :root. The burger keeps its desktop size (clamp 72/6vw/108) on
 * mobile too, so content alignment is consistent across viewports. */

.site-page__content {
    /* Room for the side labels not to overlap text. They're rotated and
       narrow — reserve a slim gutter equal to their width (= --page-gutter). */
    position: relative;
}

/* The vertical side labels (`.site-page__side`) used to live here.
 * They moved to the shared `.site-rail` primitive (assets/css/site-rail.css)
 * + the wp_footer hook in inc/setup.php — keep the page rails and the
 * Work prev/next nav driven by the same selectors. */