/* A shared metallic frame sits above the page without intercepting controls. */
:root {
  --depth-frame-light: #fff2c3;
  --depth-frame-gold: #e0bc68;
  --depth-frame-dark: #806024;
}

body[data-page]::after,
body.design-02::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 80;
  box-sizing: border-box;
  border: 7px solid var(--depth-frame-gold);
  border-image: linear-gradient(135deg, #fff2c3 0%, #e0bc68 25%, #a17b32 48%, #f7df9d 53%, #c49a47 73%, #70501e 100%) 1;
  box-shadow:
    inset 0 0 0 1px #806024,
    inset 2px 2px 0 #fff2c3b3,
    inset -3px -3px 0 #51381966,
    inset 0 0 14px #091f5926;
  pointer-events: none;
}

/* Touch screens keep document-bound rails, avoiding a full-screen shadow
   overlay that must be composited above every scrolling frame. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body[data-page],
  body.design-02 { position: relative; }

  body[data-page]::after,
  body.design-02::after {
    position: absolute;
    border-width: 3px;
    box-shadow: none;
  }
}

@media print {
  body[data-page]::after,
  body.design-02::after { content: none; }
}

@media (forced-colors: active) {
  body[data-page]::after,
  body.design-02::after { content: none; }
}