:root {
    --bw: 0px;
    --bh: 0px;
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* body itself never scrolls */
    background: var(--bg-dark);
}

/* ── Scrollable content area inside the frame ── */
.frame-content {
    position: fixed;
    top: var(--bh);
    bottom: var(--bh);
    left: var(--bw);
    right: var(--bw);
    overflow-y: auto;
    overflow-x: hidden;
    background: url('images/BG-t.webp') center center / cover no-repeat;
    z-index: 10;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    padding: 0 30px;
    width: 100%;
}

/* Large tablets / small laptops */
@media (max-width: 1024px) {

}

/* Tablets */
@media (max-width: 820px) {

}

/* Large phones */
@media (max-width: 600px) {
    .frame-content {
    padding: 0;
    }
}

/* Small phones */
@media (max-width: 420px) {
    .frame-content {
    padding: 0;
    }
}

.frame-content::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari */
}

/* Inner padding so text doesn't touch the edges */
.frame-inner {
    padding: 2.5rem 3rem 4rem;
    min-height: 100%;
}

/* ── TOC sits on top of everything ── */
.toc-overlay,
.toc-drawer,
.toc-toggle {
    z-index: 300;
}

/* ── Nav sits above frame borders ── */
nav {
    z-index: 200;
}

/* @media (max-width: 820px) {
    :root { --bw: 55px; --bh: 65px; }
}
@media (max-width: 600px) {
    :root { --bw: 38px; --bh: 48px; }
    .frame-inner { padding: 1.5rem 1.2rem 3rem; }
} */