/* Paper orange page frame — edge-to-edge outer orange, black content column.
   - Outer orange: #FF6550 / #ff6550 on html + body, full viewport (edge to edge)
   - Black content (.frame / .content): fills body content box (no 1440px cap)
   - Insets: 9px top / left / right, 21px bottom
   - Below ~760px: 8px insets (frame still visibly orange) */

html {
  background: #ff6550;
}

html body.paper-frame,
html body.roman.paper-frame {
  /* 100vw so nav/blob left-right calcs resolve to the pad (no centered column) */
  --content-max: 100vw;
  --frame-pad-t: 9px;
  --frame-pad-r: 9px;
  --frame-pad-b: 21px;
  --frame-pad-l: 9px;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: var(--frame-pad-t) var(--frame-pad-r) var(--frame-pad-b) var(--frame-pad-l) !important;
  background: #ff6550 !important;
  background-image: none !important;
  min-height: 100vh;
}

html body.paper-frame > .frame,
html body.paper-frame > .content,
html body.roman.paper-frame > .frame,
html body.roman.paper-frame > .content {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #000;
  min-height: calc(100vh - var(--frame-pad-t) - var(--frame-pad-b));
}

html body.paper-frame > .blob-container,
html body.paper-frame > #neural-canvas,
html body.paper-frame > .mouse-glow,
html body.paper-frame > .content > nav,
html body.paper-frame > .content > header.nav,
html body.roman.paper-frame > .blob-container,
html body.roman.paper-frame > #neural-canvas,
html body.roman.paper-frame > .mouse-glow,
html body.roman.paper-frame > .content > nav,
html body.roman.paper-frame > .content > header.nav {
  left: max(var(--frame-pad-l), calc((100vw - min(100vw, var(--content-max) + var(--frame-pad-l) + var(--frame-pad-r))) / 2 + var(--frame-pad-l))) !important;
  right: max(var(--frame-pad-r), calc((100vw - min(100vw, var(--content-max) + var(--frame-pad-l) + var(--frame-pad-r))) / 2 + var(--frame-pad-r))) !important;
  width: auto !important;
}

html body.paper-frame > .blob-container,
html body.paper-frame > #neural-canvas,
html body.paper-frame > .mouse-glow,
html body.roman.paper-frame > .blob-container,
html body.roman.paper-frame > #neural-canvas,
html body.roman.paper-frame > .mouse-glow {
  top: 0 !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  html body.paper-frame,
  html body.roman.paper-frame {
    --frame-pad-t: 8px;
    --frame-pad-r: 8px;
    --frame-pad-b: 8px;
    --frame-pad-l: 8px;
  }
}

/* Page scrollbar: orange thumb, black track */
html {
  scrollbar-color: #ff6550 #000;
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track {
  background: #000;
}

html::-webkit-scrollbar-thumb {
  background: #ff6550;
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover {
  background: #ff6e69;
}