/* Arch frames, shared by every Mesheract page with arch cards (homepage
 * paths, Founding Federation stages, path pages). Picked in the workshop
 * ("Arch style", every page) and set as body[data-frame]. Copied from
 * index_mesheract.html, which keeps its own copy for the spotlight stage. */
.arch__window { border-radius: 999px 999px 0 0; }
.arch__window::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; }
/* bevel: gilt edge + inner shadow, light from the top left */
body[data-frame="bevel"] .arch__window::before {
    box-shadow: inset 0 0 0 1px rgba(255,240,210,.35), inset 0 0 0 5px rgba(14,11,24,.92), inset 0 0 0 6.5px rgba(233,194,122,.75),
                inset 0 0 0 9px rgba(14,11,24,.85), inset 10px 14px 22px rgba(0,0,0,.65), inset -3px -3px 10px rgba(255,230,190,.12); }
/* carved: stepped stone molding */
body[data-frame="carved"] .arch__window::before {
    box-shadow: inset 0 0 0 3px #3a3448, inset 0 0 0 4px #8a8198, inset 0 0 0 9px #2a2536, inset 0 0 0 10px #6e6680,
                inset 0 0 0 14px #1d1928, inset 0 0 0 15px #57506a, inset 12px 16px 26px rgba(0,0,0,.7); }
body[data-frame="carved"] .arch { border-color: #57506a; }
/* keystone: bevel plus a keystone at the crown */
body[data-frame="keystone"] .arch__window::before {
    box-shadow: inset 0 0 0 1px rgba(255,240,210,.3), inset 0 0 0 7px rgba(20,16,30,.9), inset 0 0 0 8px rgba(233,194,122,.6), inset 8px 12px 20px rgba(0,0,0,.6); }
body[data-frame="keystone"] .arch__window::after { content: ''; }
body[data-frame="keystone"] .arch { position: relative; }
body[data-frame="keystone"] .arch > .arch__window > .arch__key { display: block; }
.arch__key { display: none; position: absolute; top: 0; left: 50%; width: 30px; height: 26px; transform: translateX(-50%); z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, #e9c27a, #9c7a3c); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
/* neon: the campus portal glow */
body[data-frame="neon"] .arch__window::before {
    box-shadow: inset 0 0 0 2px #ff4fd8, inset 0 0 18px 2px rgba(255,79,216,.55), inset 0 0 0 5px rgba(77,255,122,.25); }
body[data-frame="neon"] .arch { border-color: #ff4fd8; box-shadow: 0 0 22px rgba(255,79,216,.28), 0 0 2px rgba(255,79,216,.8); }
/* window: glass with mullions and a sheen */
body[data-frame="window"] .arch__window::before {
    background: linear-gradient(90deg, transparent calc(50% - 2px), rgba(14,11,24,.9) calc(50% - 2px), rgba(14,11,24,.9) calc(50% + 2px), transparent calc(50% + 2px)),
                linear-gradient(180deg, transparent 44%, rgba(14,11,24,.9) 44%, rgba(14,11,24,.9) calc(44% + 4px), transparent calc(44% + 4px)),
                linear-gradient(125deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 35%);
    box-shadow: inset 0 0 0 6px rgba(14,11,24,.92), inset 0 0 0 7px rgba(233,194,122,.45); }
/* recess: a deep portal, the world seen through thickness */
body[data-frame="recess"] .arch__window::before {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 50px 18px rgba(5,7,15,.92), inset 0 -30px 40px rgba(5,7,15,.6); }