/* 
 ---------------------------------
 |   LAST UPDATED: 2026-04-14    |
 ---------------------------------
 * Ornamental borders — Rosart SVG rail sprites.
 *
 * Sprite sheet: partials/icons/ornament-border-sprite.hbs (included once in default.hbs).
 * Rail partials: partials/icons/<rail-id>.hbs emit <svg class="orn-clef"><use href="#…"/>.
 * Geometry + composition: THEME_ARCH-borders.md §1 table.
 * Overfit contract:       THEME_ARCH-borders.md §2.
 *
 * Build: node tools/build-ornament-sprite.js
 */

/* ═══ Inline SVG rails — §2 overfit contract ═══
 *
 * Wrapper: .orn-rail    — positioned span on one edge of the bordered element.
 * Child:   svg.orn-clef — the composed rail; oversized by 20 % along its
 *                          direction so art bleeds past both ends.
 */
.orn-rail {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    overflow: visible;
}

.orn-rail--top,
.orn-rail--bottom {
    left: 0;
    right: 0;
}

.orn-rail--top    { top: 0; }
.orn-rail--bottom { bottom: 0; }

.orn-rail--left,
.orn-rail--right {
    top: 0;
    bottom: 0;
}

.orn-rail--left  { left: 0; }
.orn-rail--right { right: 0; }

.orn-rail > svg.orn-clef {
    position: absolute;
    display: block;
    color: var(--text-color);
}

.orn-rail > svg.orn-clef--horizontal {
    width: 120%;
    left: -10%;
    height: 100%;
    top: 0;
}

.orn-rail > svg.orn-clef--vertical {
    height: 120%;
    top: -10%;
    width: 100%;
    left: 0;
}

/* ═══ Ray corner decorators — SVG mask + port tint ═══ */
.ray-corner {
    position: absolute;
    width: calc(2rem * 1038 / 1000 * var(--scale));
    height: calc(2rem * var(--scale));
    line-height: 0;
    background-color: var(--port);
    pointer-events: none;
    user-select: none;
    z-index: 3;
    -webkit-mask-image: url('../img/rosart-glyphs/orn741-ray-58109.svg');
    mask-image: url('../img/rosart-glyphs/orn741-ray-58109.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.ray-corner--top-left {
    top: calc(0.5rem * var(--scale));
    left: calc(0.5rem * var(--scale));
}

.ray-corner--top-right {
    top: calc(0.5rem * var(--scale));
    right: calc(0.5rem * var(--scale));
}

.ray-corner--bottom-left {
    bottom: calc(0.5rem * var(--scale));
    left: calc(0.5rem * var(--scale));
}

.ray-corner--bottom-right {
    bottom: calc(0.5rem * var(--scale));
    right: calc(0.5rem * var(--scale));
}

.latest-post-headline-wrap .latest-post-ray-corner {
    z-index: 3;
}

.takeaway-card .ray-corner,
.takeaway-card .takeaway-card-keystone.ray-corner {
    z-index: 2;
}