@page {
    /* Browsers may ignore CSS vars in @page; PDF size is controlled by generator */
    margin: 0;
}

@font-face {
    font-family: "Heading Now";
    src: url("../font/HeadingNow-95Medium.otf");
}

/* Base */
html, body {
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

.page-base {
    width: 100%;
    height: 100%;
	padding: 0;
	margin: 0;
}

.interlude {
    position: relative;
    overflow: hidden;
    color: white;
    padding: 4rem;
    z-index: 0; /* ensure stacking context */
}

.interlude::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(20%) brightness(0.7);
    z-index: -2;
}

.interlude::after {
    content: '';
    position: absolute;
    inset: 0;
    /*background: rgba(128, 0, 128, 0.3); /* purple tint */ */
    z-index: -1;
}

.interlude-caption {
    color: rgba(225, 225, 225, 1.0);
    font-family: "Heading Now";
    line-height: 2em;
    rotate: 5deg;
}

/* Use border-box sizing everywhere to keep dimensions predictable */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Screen preview: render a page at exact CSS inches */
@media screen {
    #page {
        width: var(--page-w, 5.5in);
        height: var(--page-h, 8.5in);
        background: white;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.18);
    }
}

/* Print-specific sizing to ensure exact physical dimensions */
@media print {
    html, body {
        width: var(--page-w, 5.5in);
        height: var(--page-h, 8.5in);
        margin: 0;
        padding: 0;
        overflow: hidden; /* Never spill to a second page */
    }

    #page {
        width: 100%;
        height: 100%;
        max-width: var(--page-w, 5.5in);
        max-height: var(--page-h, 8.5in);
        margin: 0;
        padding: 0;
        overflow: hidden; /* Clip any overflow just in case */
        page-break-inside: avoid; /* Legacy */
        break-inside: avoid-page; /* Modern */
    }

    /* Avoid browser-added headers/footers if possible (user may need to disable in print dialog) */
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-sizing: border-box;
        background: white;
    }
}