:root {
    /* Left column width as percentage of viewport width */
    --left-col: 50;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main {
    font-family: serif;
    font-size: 20px;
}

main.pairs-layout {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-inline: clamp(0.75rem, 2vw, 2.5rem);
}

/* With heavy heart, use smaller font for the outer frame story, to match Hertel's Sanskrit book. Can revert when we have paragraph-level alignment. */
.outer-frame-story {
    font-size: 17px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.controls label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.controls input[type="range"] {
    width: 220px;
}

.pair {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-block: 2rem;
}

.pair-left {
    flex: 0 0 calc(var(--left-col) * 1%);
    max-width: 100%;
}

.pair-left a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.pair-left .scan-link {
    font-size: 0.85rem;
    text-align: right;
}

.pair-left img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 0.75rem auto;
    border-radius: 0.25rem;
    background: #eee;
}

.pair-left .scan-image {
    position: relative;
    overflow: hidden;
    margin: 0 0 0.75rem auto;
    border-radius: 0.25rem;
    background: #eee;
    --legacy-crop: calc(var(--frac, 0.15) * (1 - var(--frac, 0.15)));
    aspect-ratio: calc((2088 / 3121) / clamp(0.0001, 1 - var(--legacy-crop), 1));
}

.pair-left .scan-image img {
    margin: 0;
    border-radius: 0;
    transform: translateY(calc(var(--legacy-crop) * -100%));
}

.pair-left .scan-image .loupe-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

.pair-left .scan-image .loupe-wrapper img {
    width: 100%;
    height: auto;
}

@media (hover: hover) and (pointer: fine) {
    .pair-left .loupe-wrapper {
        cursor: zoom-in;
    }

    .pair-left .loupe-wrapper .loupe-lens {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--loupe-size, 180px);
        height: var(--loupe-size, 180px);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transform: translate(-9999px, -9999px);
        transition: opacity 0.15s ease;
        border: 2px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 200% 200%;
    }

    .pair-left .loupe-wrapper.is-active .loupe-lens {
        opacity: 1;
    }
}

.pair-right {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 72ch;
}

.pair-right pre {
    margin-left: 0;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* Narrow: stack image above text */
@media (max-width: 800px) {
    .pair {
        flex-direction: column;
    }

    .pair-left {
        flex-basis: auto;
        width: 100%;
    }

    .pair-left .scan-image {
        margin: 0 0 0.75rem 0;
    }

    .pair-left img {
        margin: 0 0 0.75rem 0;
    }

    .pair-right {
        max-width: 100%;
    }
}

/* We use <pre>...</pre> for verses. */
pre {
    font-family: serif;
    margin-left: 25%;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* An empty paragraph inserted between paragraphs (I don't remember why), but we want it to not take height. */
p.parbreak {
    margin-top: -4px;
    margin-bottom: -4px;
    line-height: 0.0px;
    height: 0.0px;
}

/* Just matching the style of Ryder's original I think? */
h1,
h2 {
    font-variant: small-caps;
}

main.pairs-layout pre {
    margin-left: 25%;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}