/* Architectural frame: fixed to the viewport, behind the reading surface. */
:root {
 --temple-stone: color-mix(in srgb, var(--surface-3) 84%, var(--gold));
 --temple-highlight: color-mix(in srgb, var(--surface-3) 66%, var(--gold));
 --temple-shadow: color-mix(in srgb, var(--bg) 85%, var(--surface-2));
 --temple-edge: color-mix(in srgb, var(--line) 65%, var(--gold));
 --temple-metal: color-mix(in srgb, var(--gold) 65%, var(--line));
 --temple-presence: .8;
}
:root[data-theme=light] {
 --temple-stone: color-mix(in srgb, var(--surface-2) 92%, var(--gold));
 --temple-highlight: var(--surface);
 --temple-shadow: color-mix(in srgb, var(--bg) 88%, var(--line));
 --temple-edge: color-mix(in srgb, var(--line) 80%, var(--gold));
 --temple-metal: color-mix(in srgb, var(--gold) 45%, var(--line));
 --temple-presence: .65;
}
.temple-frame {
 position: fixed;
 inset: 0 0 0 var(--sidebar-width);
 z-index: 0;
 overflow: hidden;
 pointer-events: none;
 contain: strict;
 transition: left .2s;
}
.temple-frame__definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.temple-frame__light {
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse at 0 45%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 35%), radial-gradient(ellipse at 100% 45%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 35%), radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 55%);
}
.temple-frame__side {
 position: absolute;
 top: 0;
 bottom: 0;
 width: clamp(72px, 8.5vw, 150px);
 height: 100%;
 opacity: var(--temple-presence);
 mask-image: linear-gradient(to right, black 25%, transparent 100%);
}
.temple-frame__side--left { left: 0; }
.temple-frame__side--right { right: 0; transform: scaleX(-1); }
.temple-frame__floor {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: clamp(110px, 23vh, 240px);
 opacity: var(--temple-presence);
 mask-image: linear-gradient(to bottom, transparent, black 80%);
}
.site-body { position: relative; z-index: 1; }
@media (max-width: 700px) {
 .temple-frame__side { width: 38px; opacity: .45; }
 .temple-frame__floor { height: 110px; opacity: .4; }
 .temple-frame__light { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
 .temple-frame { transition: none; }
}
@media print {
 .temple-frame { display: none; }
}