:root {
    --margin: min(4vw, 5mm);
    --page-width: 155mm;
    --side-width: max(0px, calc((100vw - var(--page-width)) / 2));
    --seal-radius: 7.5mm;
}

@font-face {
    font-family: "TorreFarfan";
    src: url(font/TorreFarfan-Regular.woff2) format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "P22 Operina Fiore";
    src: url(font/P22\ Operina\ W00\ Fiore.woff2) format('woff2');
    font-display: swap;
}

html {
    font-family: "TorreFarfan", "Garamond", serif;
    font-size: 14pt;
    -webkit-text-size-adjust: 100%;
}

h1 {
    font-family: "P22 Operina Fiore";
    font-weight: 400;
    margin: 0;
    text-align: center;
}

h2 { font-weight: 400; }

/* Spacing adjustments */
p { line-height: 1.2em; }
h1 + h2, h1 + p { margin-top: 0; }
p:has(+ nav) { margin-bottom: 0; }
nav { margin-bottom: 4px; }
nav + p { margin-top: 0; }

body {
    margin: 0;
}

html, body {
    overscroll-behavior: none;
}

@media screen and (max-width: 600px) {
    .background {
        background-image: url(img/PQxFragonard-med.webp);
    }
}
@media screen and (min-width: 601px) {
    .background {
        background-image: url(img/PQxFragonard.webp);
    }
}

.background {
    background-color: #012f1d;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

a:active {
    text-decoration: none;
}

.page {
    position: relative;
    margin: var(--margin);
    padding: calc(2 * var(--margin));
    box-shadow: 0 0 var(--margin) #555;
    background-color: #fff6d5;
    width: auto;
    
    a { color: #a52a2a; }
    a:hover, a:focus-visible { color: #e00000; }
}

header, footer {
    color: #d8d6c4;
    text-align: center;
    background: #555a;
    padding: var(--margin);
    
    a, h1 { color: #ebad39; }
    a:hover, a:focus-visible { color: #f0ebc5; }
}

.title {
    font-size: 3rem;
    text-shadow: 0 0 5px black;
    /* text-shadow: 1px 4px 0px black; */
}

.back {
    position: absolute;
    top: calc(0pt - var(--seal-radius));
    left: 50%;
    transform: translate(-50%, 0);
    display: inline-block;
    background-color: #a52a2a;
    box-sizing: border-box;
    height: calc(2 * var(--seal-radius));
    width: calc(2 * var(--seal-radius));
    clip-path: circle(calc(.95 * var(--seal-radius)));
    text-decoration: none;
    text-align: center;
    align-content: center;
    font-size: 20pt;
}

.back::after {
    color: #fff6d5;
}

.back:hover::after, .back:focus-visible::after
{
    text-shadow: 0 0 2mm #ff0000;
}

.nowrap {
    display: inline-block;
}

/* Shoutouts to lyra rebane */
.toggle {
    input {
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
    
    label {
        cursor: pointer;
        color: #ebad39;
        text-decoration: underline;
        
        &:hover, &:focus { color: #f0ebc5; }
        &:active { text-decoration: none; }
    }
    
    input:focus-visible + label {
        color: #f0ebc5;
    }
}

/* Horizontal mode */

body:has(#htoggle:checked) {
    overflow-y: hidden;
    
    .vertical-mode {
        display: none;
    }
    
    .scroll-wrapper {
        height: 100svh;
        display: flex;
        flex-flow: row nowrap;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overflow: auto;
        position: relative;
        overflow-y: hidden;
        overscroll-behavior-y: none;
    }
    
    /* Maybe fixes scroll-snap issue where I can't scroll to title page */
    .scroll-wrapper-start {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        width: 0;
        flex: none;
    }
    
    .scroll-wrapper-end {
        scroll-snap-align: end;
        scroll-snap-stop: always;
        width: 0;
        flex: none;
    }
    
    .page-wrapper {
        position: relative;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        width: min(var(--page-width), 100vw);
        height: 100%;
        flex: none;
        overflow-y: scroll;
        scrollbar-width: none;
        overscroll-behavior-y: none;
    }
    
    .page {
        min-height: 220mm;
    }
    
    .header-wrapper {
        box-sizing: border-box;
        width: min(100vw, calc(var(--page-width) + var(--side-width)));
        flex: none;
        overflow-x: scroll;
        scrollbar-width: none;
        position: sticky;
        left: 0;
        padding: var(--margin);
        padding-left: calc(var(--margin) + max(0pt, var(--side-width)));
    }
    
    .footer-wrapper {
        box-sizing: border-box;
        width: min(100vw, var(--page-width));
        flex: none;
        position: sticky;
        left: var(--side-width);
        padding: var(--margin);
        margin-left: calc(0pt - min(100vw, var(--page-width)));
    }
    
    .header-concealer {
        display: flex;
        flex-flow: row nowrap;
        
        .page-wrapper {
            z-index: 1;
        }
    }
    
    .footer-concealer {
        display: flex;
        flex-flow: row nowrap;
        width: calc(2 * min(100vw, var(--page-width)) + var(--side-width));
        flex: none;
        
        .page-wrapper {
            z-index: 1;
        }
    }
    
    .back::after {
        content: "☚";
        position: relative;
        top: 3px;
    }
    
    .anchor {
        transform: translateX(calc(min(var(--page-width), 100vw) + var(--side-width) - var(--margin)));
    }
}  /* end horizontal mode */

/* Vertical mode */

body:has(#vtoggle:checked) {
    .horizontal-mode {
        display: none;
    }
    
    .scroll-wrapper {
        width: min(100vw, var(--page-width));
        margin: 0 auto;
    }
    
    .header-wrapper, .footer-wrapper {
        padding: var(--margin);
    }
    
    .back::after {
        content: "☚";
        writing-mode: vertical-rl;
        text-orientation: sideways;
        position: relative;
        right: 6px;
        bottom: 5px;
    }
}  /* end vertical mode */