/* Color scheme */

:root {
    /* --p stands for 'palette'
       You should generally not use these colors directly, prefer semantic names. */
    --p-background-off-white: #f8f8f8;
    --p-background-yellow: #fdf9ed;
    --p-foreground-red: #d00000;
    --p-foreground-pink: #e85992;
    --p-foreground-blue: #047dd9;
    --p-foreground-purple: #623cea;
    --p-foreground-green: #0e8a16;
    --p-foreground-sea: #347f6b;
    --p-text-black: #333333;
    --p-text-pink: #3f0032;
    --p-text-blue: #224353;

    --landing-0: #ff85b6;
    --landing-1: #88fa9b;
    --landing-2: #c4ff89;
    --landing-3: #faee96;
    --landing-4: #ffe5b1;
    --landing-background: linear-gradient(
        to right,
        var(--landing-1) 0%,
        var(--landing-2) 21%,
        var(--landing-3) 65%,
        var(--landing-4) 100%
    );

    --border-1: rgba(0, 0, 0, 30%); /* inputs, shadows */
    --border-2: rgba(0, 0, 0, 15%); /* separators */

    --background-color: var(--p-background-off-white);
    --text-color: var(--p-text-black);
    --text-dim-color: color-mix(in srgb, var(--background-color), var(--text-color) 75%);
    --link-color: #096cb7;
    --link-visited-color: #8834ae;
    --field-color: white;
    --shadow-color: rgb(0 0 0 / 0.1);
    --shadow-color: rgb(30 50 51 / 0.1);
    --focus-color: oklch(from var(--p-foreground-blue) 0.75 c h);
    --error-color: var(--p-foreground-red);
    --partial-error-color: var(--p-foreground-pink);
    --ok-color: oklch(from var(--p-foreground-green) 0.75 c h);

    --main-navbar-thickness: 4.8rem;
    --heading-margin: 4rem;
}

html {
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    &:visited {
        color: var(--link-visited-color);
    }
}

:focus-visible {
    outline: 0.2rem solid var(--focus-color);
}

/* Animation */

:root {
    --transition-duration: 0.15s;

    --ease-out-quintic: cubic-bezier(0.17, 0.84, 0.44, 1);
    --ease-in-out-quintic: cubic-bezier(0.83, 0, 0.17, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-duration: 0;
    }
}

/* Page layout */

body {
    display: grid;
    grid-template-columns: var(--main-navbar-thickness) 1fr;

    @media (max-width: 580px) {
        grid-template-columns: unset;
        grid-template-rows: var(--main-navbar-thickness) 1fr;
    }
}

nav {
    --main-nav-background-color: var(--background-color);
    --main-nav-hover-color: rgb(0 0 0 / 5%);
    --main-nav-active-color: rgb(0 0 0 / 10%);
    --main-nav-open-color: var(--p-foreground-blue);
    --main-nav-horizontal-spacing: 0rem;

    position: sticky;
    top: 0;
    z-index: 1;

    height: 100dvh;

    background-color: var(--main-nav-background-color);
    box-shadow: 0 0 12px var(--shadow-color);

    display: flex;
    flex-direction: column;

    /* TEST: will this fix Firefox jank? */
    will-change: transform;

    & > .section {
        display: flex;
        flex-direction: column;
        flex: 0 1 auto;

        &.end {
            flex: 1 1 auto;
            justify-content: end;
        }
    }

    & .logo {
        display: flex;
        align-items: center;
        width: 100%;

        --background-color: var(--p-foreground-pink);
        --text-color: var(--p-background-off-white);
        background-color: var(--background-color);
        color: var(--text-color);

        font-size: 180%;
        font-weight: 900;

        --shadow-color: color-mix(in srgb, var(--background-color), black 70%);
        text-shadow:
            0.05rem 0.05rem 0px var(--shadow-color),
            0.1rem 0.1rem 0px var(--shadow-color),
            0.15rem 0.15rem 0px var(--shadow-color),
            0.2rem 0.2rem 0px var(--shadow-color),
            0.25rem 0.25rem 0px var(--shadow-color),
            0.3rem 0.3rem 0px var(--shadow-color),
            0.35rem 0.35rem 0px var(--shadow-color),
            0.4rem 0.4rem 0px var(--shadow-color);
        text-decoration: none;

        --border: 0.2rem solid color-mix(in oklab, var(--background-color), black 10%);
        border-right: var(--border);
        border-left: var(--border);

        & svg {
            filter: drop-shadow(0.05rem 0.05rem 0 var(--shadow-color))
                drop-shadow(0.05rem 0.05rem 0 var(--shadow-color))
                drop-shadow(0.1rem 0.1rem 0 var(--shadow-color))
                drop-shadow(0.2rem 0.2rem 0 var(--shadow-color));
        }
        & .logo-vert {
            display: block;
        }
        & .logo-horz {
            display: none;
        }
    }

    /* navigation / menu buttons; children of .section */
    & .button {
        display: flex;
        height: var(--main-navbar-thickness);

        /* button content; the part with the icon and text */
        & > :is(a, button) {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

            background-color: transparent;

            /* reset <a> styles */
            color: var(--text-color);
            text-decoration: none;

            font-size: 77.5%;
            font-weight: 550;
            line-height: 1;

            position: relative; /* for closing function */

            /* longer strings can use .small to fit in the box */
            & .small {
                font-size: 90%;
            }

            &.language {
                flex-direction: row;
                gap: 0.2ch;

                & .hiragana {
                    font-weight: 850;
                }

                & .romaji {
                    font-weight: 700;
                    font-size: 125%;
                    margin-top: -0.1rem;
                }
            }
        }

        & > :is(a, button),
        &::after {
            width: var(--main-navbar-thickness);
            height: var(--main-navbar-thickness);
        }

        &:active > :is(a, button) {
            background-color: var(--main-nav-active-color);
        }

        &:focus-within > .tooltip {
            visibility: visible;
        }

        @media (hover: hover) {
            &:hover > :is(a, button) {
                background-color: var(--main-nav-hover-color);
            }
            &:hover > .tooltip {
                visibility: visible;
            }
        }

        &:has(button):focus-within {
            &:not(:active) > :is(a, button) {
                background-color: var(--main-nav-active-color);
            }

            /* when the button has focus, display an invisible element above it
               to allow clicking on it once again to close the menu */
            &::after {
                content: "";
                display: block;
                position: absolute;
            }
        }
    }

    /* when one menu is open, don't show another one when it's icon is hovered */
    & .button:focus-within ~ .button,
    & .button:has(~ .button:focus-within) {
        &:hover > .tooltip {
            visibility: hidden;
        }
    }

    /* for buttons positioned at the end of the bar,
       make sure the tooltips don't go off screen by aligning them to the bottom rather than the top */
    & .section.end .button {
        align-items: end;
    }

    & .tooltip {
        position: fixed;
        width: max-content;
        height: max-content;
        /* this is normally positioned inside the .button element,
           so we move it to the right to go outside the nav bar */
        margin-left: var(--main-navbar-thickness);

        visibility: hidden;

        background-color: var(--main-nav-background-color);
        border-top-right-radius: 0.8rem;
        border-bottom-right-radius: 0.8rem;

        box-shadow: 0 0 1.2rem rgb(from var(--text-color) r g b / 0.1);
    }

    & .tooltip {
        & h3 {
            font-family: var(--font-body);
            font-weight: 700;
            padding: 0.8rem 1.6rem;
            @media (hover: none) {
                padding: 1.2rem 1.2rem;
            }
        }

        & menu {
            display: flex;
            flex-direction: column;

            & > li a {
                display: flex;
                flex-direction: row;
                align-items: center;

                padding: 0.8rem 1.6rem;
                padding-right: 3.2rem;
                @media (hover: none) {
                    padding: 1.2rem 1.2rem;
                }

                &:has(> .icon) {
                    height: 4rem;
                    padding-left: 0.4rem;
                    gap: 0.4rem;
                }

                color: var(--text-color);
                text-decoration: none;

                &:hover {
                    background-color: var(--main-nav-hover-color);
                }
                &:active {
                    background-color: var(--main-nav-active-color);
                }
            }
        }
    }

    & .only-narrow-screen {
        display: none;
    }

    @media (max-width: 580px) {
        width: 100%;
        height: var(--main-navbar-thickness);
        flex-direction: row;

        & .logo {
            height: var(--main-nav-thickness-without-border);

            border: none;
            border-top: var(--border);
            border-bottom: var(--border);

            & .logo-horz {
                display: block;
            }
            & .logo-vert {
                display: none;
            }
        }

        & > .section {
            flex-direction: row;
        }

        & .tooltip {
            width: 100%;
            top: var(--main-navbar-thickness);
            left: 0;
            margin-left: 0; /* reset the offset from before */
            border-radius: 0;
        }

        & .only-wide-screen {
            display: none;
        }

        & .only-narrow-screen {
            display: flex;
        }
    }

    @media (max-width: 320px) {
        & .logo {
            max-width: 15rem;
        }
    }

    @media (max-width: 270px) {
        & .logo {
            display: none;
        }
    }
}

.template-page-base-main {
    --main-grid-padding: 4.8rem;
    --main-left-grid-padding: var(--main-grid-padding);
    --main-right-grid-padding: var(--main-left-grid-padding);

    max-width: 100%;
    display: grid;
    grid-template-columns:
        [left-padding] var(--main-left-grid-padding)
        [left] 1fr
        repeat(6, [center-start] minmax(0, 25ch) [center-end])
        [right] 1fr
        [right-padding] minmax(var(--main-right-grid-padding), auto);

    & > * {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: subgrid;
    }

    @media (max-width: 1100px) {
        --main-right-grid-padding: var(--main-grid-padding);
    }

    @media (max-width: 580px) {
        --main-grid-padding: 1.6rem;
        --main-left-grid-padding: var(--main-grid-padding);
    }
}

/* Widgets */

img {
    max-width: 100%;
    height: auto;
}

.button-push,
a.button-push {
    --button-background-color: var(--p-foreground-pink);
    --button-text-color: var(--p-background-yellow);

    --button-border-color: oklch(from var(--button-background-color) calc(l - 0.3) c h);
    --button-highlight-color: white;

    padding: 0.6rem 1.4rem;
    border: 0.1rem solid var(--button-border-color);
    border-radius: 1000rem;

    background-color: var(--button-background-color);
    background-clip: padding-box;
    color: var(--button-text-color);

    font-weight: 600;
    text-decoration: none; /* for links */

    text-shadow: 0px 1px 2px var(--button-border-color);
    box-shadow:
        0 1px 2px var(--border-1),
        inset 0 -3px 2px rgb(from var(--button-border-color) r g b / 15%),
        inset 0 3px 4px rgb(from var(--button-highlight-color) r g b / 10%);

    transition-property: background-color, box-shadow, transform, color, text-shadow;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--ease-out-quintic);

    &:hover:not(:disabled) {
        box-shadow:
            0 4px 6px var(--border-1),
            inset 0 -3px 2px rgb(from var(--button-border-color) r g b / 15%),
            inset 0 3px 4px rgb(from var(--button-highlight-color) r g b / 20%);
        /* transform: translateY(-2px); */
    }

    &:active:not(:disabled) {
        background-color: color-mix(
            in oklch,
            var(--button-background-color),
            var(--button-border-color) 25%
        );
        box-shadow:
            0 0 2px var(--border-1),
            inset 0 -3px 2px rgb(from var(--button-border-color) r g b / 15%),
            inset 0 3px 4px transparent /* no highlight */;
        /* transform: translateY(0); */
        transition: none;
    }

    &:disabled {
        --button-disabled-background-color: oklch(
            from var(--button-background-color) calc(l - 0.1) calc(c - 0.05) h
        );
        --button-border-color: oklch(
            from var(--button-disabled-background-color) calc(l - 0.3) c h
        );

        box-shadow: none;
        background-color: var(--button-disabled-background-color);
        color: color-mix(
            in oklab,
            var(--button-disabled-background-color),
            var(--button-text-color) 80%
        );
    }

    &.button-push-secondary {
        --button-secondary-color: color-mix(
            in srgb,
            var(--background-color),
            var(--text-color) 75%
        );

        background-color: unset;
        color: var(--button-secondary-color);
        border-color: var(--button-secondary-color);
        text-shadow: unset;
        box-shadow: unset;
    }

    /* for turning the button into a throbber */
    --throbber-color: var(--button-text-color);
}

input,
textarea,
.input-inset {
    --input-border-color: color-mix(in srgb, var(--background-color), var(--text-color) 40%);

    padding: 0.6rem 1rem;
    border: 0.1rem solid var(--input-border-color);
    border-radius: 0.6rem;

    background-color: var(--field-color);
    background-clip: padding-box;
    color: var(--text-color);

    --input-inset-shadow: inset 0 2px 4px rgb(from var(--input-border-color) r g b / 25%);
    --input-glow-shadow: 0 0 2px var(--input-border-color);
    box-shadow: var(--input-inset-shadow);

    transition:
        background-color var(--transition-duration) var(--ease-out-quintic),
        box-shadow var(--transition-duration) var(--ease-out-quintic),
        border-color var(--transition-duration) var(--ease-out-quintic);

    &:focus-visible {
        outline: none;
        --input-border-color: var(--focus-color) !important;
        box-shadow: var(--input-inset-shadow), var(--input-glow-shadow);

        &:valid {
            --input-border-color: var(--ok-color) !important;
        }
    }

    &:user-invalid,
    &.has-error:not(:user-valid) {
        --input-border-color: var(--error-color);
        box-shadow: var(--input-inset-shadow), var(--input-glow-shadow);

        text-decoration: underline 0.1rem solid var(--error-color);
        &::placeholder {
            text-decoration: none;
        }
    }
}

input[type="checkbox"] {
    --checkbox-size: 2rem;

    appearance: none;

    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;

    padding: 0;
    border-radius: 0.4rem;

    &::after {
        content: "";

        display: block;
        width: var(--checkbox-size);
        height: var(--checkbox-size);

        margin-left: -0.1rem; /* compensate for parent's border */
        margin-right: -0.1rem;

        background-image: var(--icon-checkmark);
        filter: drop-shadow(0 0.1rem 0.1rem oklch(from var(--accent-color) calc(l * 0.6) c h));

        opacity: 0;
    }

    &:checked {
        --accent-color: var(--p-foreground-blue);

        background-color: var(--accent-color);
        border-color: oklch(from var(--accent-color) calc(l * 0.5) calc(c * 1.1) h);

        background: linear-gradient(
            to bottom,
            var(--accent-color),
            oklch(from var(--accent-color) calc(l * 0.8) c h)
        );
        box-shadow: inset 0 0 0.2rem var(--accent-color);

        &::after {
            opacity: 1;
        }
    }
}

@keyframes throbber-rotation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.throbber {
    position: relative;

    &::before {
        content: "";
        display: block;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: 1.6rem;
        height: 1.6rem;

        background: conic-gradient(transparent 0%, var(--throbber-color) 100%);
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="5" fill="none" stroke="black" stroke-width="6" /></svg>');

        opacity: 0;

        transition: opacity var(--transition-duration) var(--ease-out-quintic);
        /* stupid joke / easter egg with the animation speed here,
               it's synchronised to a couple Aphex Twin tracks which have a tempo of 141.98 bpm
               https://www.youtube.com/watch?v=LChn8xOVzUQ
               https://www.youtube.com/watch?v=liSwqoJvEBQ
               nobody will EVER know this outside of kemo-star. */
        animation: throbber-rotation 0.8451894633s forwards infinite linear;
    }

    &.throbber-show {
        color: transparent !important;
        text-shadow: none;

        &::before {
            opacity: 1;
        }
    }
}

/* Elements */

.template-illustrated-prose {
    margin: calc(var(--heading-margin) - 0.5lh) 0;

    & > .prose {
        grid-column: center-start 1 / center-end 3;
    }
}

.template-landing {
    min-height: 100svh;
    grid-template-rows: 1fr 1fr;

    & .subtitle {
        font-size: 125%;
    }

    & > .background {
        grid-column: 1 / -1;
        grid-row: 1 / -1;

        position: relative;
        overflow: clip;

        & .gradient {
            --color-gradient-stop: 100%;

            width: 100%;
            height: var(--color-gradient-stop);

            background-image:
                linear-gradient(to bottom, transparent 0%, var(--background-color) 100%),
                var(--landing-background);
        }

        & .stars {
            width: 100%;
            height: 100%;
            right: 0;
            bottom: 0;

            position: absolute;

            & .star {
                --start-angle: 0deg;
                --speed: 1;

                --c-0: var(--landing-0);
                --c-1: color-mix(in oklab, var(--landing-2), var(--landing-3) 30%);
                --c-2: color-mix(in oklab, var(--c-1), var(--background-color) 50%);
                --c-3: var(--landing-3);
                --c-4: color-mix(in oklab, var(--landing-3), var(--background-color) 30%);
                --c-5: color-mix(in oklab, var(--landing-3), var(--background-color) 60%);

                position: absolute;
                right: 0;
                bottom: 0;
                color: magenta;
                rotate: var(--start-angle);

                @media (prefers-reduced-motion: reduce) {
                    animation: none;
                }
            }
        }
    }

    & > .focus {
        grid-column: center-start 1 / center-end 6;
        grid-row: 1 / -1;

        position: relative; /* interact with .background's stacking order */

        display: flex;
        align-items: center;

        & > .box {
            padding: 3.2rem 3.6rem;
            max-width: 80ch;

            background-color: var(--background-color);
            border-radius: 1.6rem;
            box-shadow: 0 1.2rem 2.4rem var(--shadow-color);

            & .title {
                display: flex;
                flex-direction: column;
                justify-content: end;
            }

            & h1 {
                display: block;

                font-size: 300%;
                font-weight: 800;
                text-wrap: balance;

                line-height: 1.2;

                & .outer {
                    padding: 0 0.8rem;
                    margin: 0 -0.8rem;
                    -webkit-box-decoration-break: clone;
                    box-decoration-break: clone;
                    background: linear-gradient(
                        to bottom,
                        transparent,
                        transparent 50%,
                        oklch(from var(--landing-2) l calc(c * 0.6) h) 50%
                    );
                    color: var(--p-text-blue);
                }
            }

            & .blurb {
                padding-top: 0.5lh;
                max-width: 80ch;

                & > .button-bar {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 1.2rem;

                    padding-top: 1lh;

                    & > .text-after-button {
                        color: color-mix(in srgb, var(--background-color), var(--text-color) 75%);
                    }
                }
            }
        }
    }

    @media (max-width: 876px) {
        & > .focus .box h1 {
            font-size: 250%;
        }
    }

    @media (max-width: 650px) {
        & > .background {
            & .gradient {
                --color-gradient-stop: 30%;
            }

            & .stars {
                transform-origin: right bottom;
                scale: 0.5;
            }
        }

        & > .focus .box {
            background: none;
            box-shadow: none;
            padding: 0 0.4rem;

            & h1 {
                font-size: 200%;
            }

            & .subtitle {
                font-size: 110%;
            }

            & .blurb > .button-bar {
                flex-direction: column;

                padding-bottom: 1.6rem;

                & .text-after-button {
                    text-align: center;
                    text-wrap: balance;
                    padding: 0 0.8rem;
                    background-color: var(--background-color);
                    border-radius: 0.4rem;
                }
            }
        }
    }

    @media (max-width: 580px) {
        & > .focus {
            top: var(--main-navbar-thickness);
            height: calc(100svh - var(--main-navbar-thickness));
        }
    }
}

.template-markup {
    grid-column: center-start 1 / center-end 6;
    display: block;
}

.template-offers {
    margin: calc(var(--heading-margin) - 1rem) 0;

    & > ul {
        grid-column: center-start 1 / center-end 6;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 50ch));

        justify-content: center;

        & > li {
            padding: 3.2rem;
            margin: 1rem;

            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 5;
            grid-auto-flow: row;

            /*grid-column: span 2;
            &:last-child {
                grid-column-end: 4;
            }*/

            --tile-color: magenta;
            &:nth-child(3n + 1) {
                --tile-color: var(--p-foreground-blue);
            }
            &:nth-child(3n + 2) {
                --tile-color: var(--p-foreground-green);
            }
            &:nth-child(3n + 3) {
                --tile-color: var(--p-foreground-pink);
            }

            border: 0.1rem solid var(--tile-color);
            border-radius: 1.6rem;
            --tile-background-color: color-mix(
                in oklab,
                var(--tile-color),
                var(--background-color) 93.5%
            );
            background-color: var(--tile-background-color);
            background-clip: padding-box;

            & h2 {
                margin-bottom: 0.25lh;
                font-size: 150%;
                font-weight: 600;

                /* 2026-06-11: for Chromium and Webkit, this prevents an ugly hanging 「へ。」
                   at the end of the line if it wraps.
                   Firefox doesn't really get any help from this because it still doesn't
                   implement this feature. However, we do what we can. */
                text-wrap: pretty;

                & strong {
                    font-weight: 800;

                    padding: 0.2rem 0.6rem;
                    margin: -0.2rem -0.6rem;

                    --highlight-color: color-mix(
                        in oklab,
                        var(--tile-color),
                        var(--background-color) 60%
                    );
                    background: linear-gradient(
                        to bottom,
                        transparent,
                        transparent 50%,
                        var(--highlight-color) 50%
                    );

                    text-shadow:
                        0.05rem 0.05rem 0 var(--tile-background-color),
                        0.1rem 0.1rem 0 var(--tile-background-color),
                        0.15rem 0.15rem 0 var(--tile-background-color),
                        0.2rem 0.2rem 0 var(--tile-background-color);
                }
            }

            & .price-row {
                padding-top: 1lh;

                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;
                gap: 0.8rem;

                & .price {
                    font-size: 150%;
                }

                & .hidden {
                    display: none;
                }
            }

            @media (max-width: 520px) {
                padding: 1.6rem;
                margin: 0.8rem 0;

                & h2 {
                    margin-top: 0.25lh;
                    /* font-size: 140%; */
                    width: 100%;
                    text-align: center;
                }
            }
        }

        @media (min-width: 1000px) and (max-width: 1400px) {
            grid-template-columns: repeat(4, minmax(0, 50ch));

            & > li {
                grid-column: span 2;
                &:last-child {
                    grid-column-end: 4;
                }
            }
        }

        @media (max-width: 1000px) {
            grid-template-columns: repeat(auto-fit, minmax(0, 50ch));
        }
    }

    & > .disclaimer {
        grid-column: center-start 1 / center-end 6;
        justify-content: center;
        align-items: center;
        padding-top: 1lh;

        color: color-mix(in srgb, var(--background-color), var(--text-color) 75%);
        text-align: center;
    }
}

.template-offer-more {
    margin: var(--heading-margin) 0;

    & > .blurb {
        grid-column: center-start 1 / center-end 2;
        display: block;
        margin-right: 1.6rem;
    }

    & > form {
        grid-column: center-start 3 / center-end 6;
        display: block;
        height: max-content;

        padding: 2rem;
        margin: 0 1rem;
        background-color: color-mix(
            in oklab,
            var(--p-foreground-purple),
            var(--background-color) 93.5%
        );
        border: 0.1rem solid var(--p-foreground-purple);
        border-radius: 1.6rem;
        background-clip: padding-box;

        & > h3 {
            padding: 0 1.6rem;
            margin: 0 -1.6rem;
            margin-bottom: 0.33lh;

            font-size: 135%;
            font-weight: 800;
            text-wrap: balance;

            box-shadow: -8px 0px 0px 0px var(--p-foreground-purple);
        }

        & > .labels {
            margin: 1rem 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;

            & label {
                margin-right: 0.5rem;
            }

            & input {
                --input-border-color: var(--p-foreground-purple);
            }

            & > div {
                width: max-content;
            }
        }

        & > textarea {
            min-height: 7lh;
            width: 100%;
            resize: vertical;
            --input-border-color: var(--p-foreground-purple);
        }

        & > .buttons {
            & > * {
                margin-top: 0.8rem;
                margin-right: 0.5rem;
            }
        }

        & .hidden {
            display: none;
        }
    }

    @media (max-width: 680px) {
        & > .blurb,
        & > form {
            grid-column: center-start 1 / center-end 6;
            margin: 0;
        }

        & > form > .buttons {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            width: 100%;
            align-items: center;

            & > * {
                margin-right: 0;
            }
        }
    }

    @media (max-width: 920px) {
        & > .blurb,
        & > form {
            grid-column: center-start 1 / center-end 6;
            margin: 0;
        }

        & > .blurb {
            margin-bottom: 1.6rem;
        }
    }
}

.template-product {
    margin: calc(var(--heading-margin) - 0.5lh) 0;

    & > .blurb,
    & > ul {
        grid-column: center-start 4 / center-end 6;
    }

    & > ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));

        gap: 3.2rem;

        padding-top: 1.5lh;

        & > li {
            padding-right: 1.6rem;

            --tile-color: magenta;
            &:nth-child(3n + 1) {
                --tile-color: var(--p-foreground-blue);
            }
            d d &:nth-child(3n + 2) {
                --tile-color: var(--p-foreground-green);
            }
            &:nth-child(3n + 3) {
                --tile-color: var(--p-foreground-pink);
            }
            d & h2 {
                padding: 0 1.6rem;
                margin: 0 -1.6rem;
                margin-bottom: 0.33lh;

                font-size: 133%;
                font-weight: 800;
                text-wrap: balance;

                box-shadow: -8px 0px 0px 0px var(--tile-color);
            }
        }
    }
}

.template-section-heading {
    --section-heading-primary: var(--p-foreground-blue);
    --section-heading-border: color-mix(in srgb, var(--section-heading-primary), black 10%);

    &.blue {
        --section-heading-primary: var(--p-foreground-blue);
    }
    &.purple {
        --section-heading-primary: var(--p-foreground-purple);
    }
    &.green {
        --section-heading-primary: var(--p-foreground-green);
    }
    &.pink {
        --section-heading-primary: var(--p-foreground-pink);
    }
    &.red {
        --section-heading-primary: var(--p-foreground-red);
    }

    &.earth {
        --section-heading-primary: #10358c;
    }

    color: var(--p-background-off-white);

    padding: 0.75lh 0;
    border: 0 solid var(--section-heading-border);
    border-width: 0.2rem 0;

    background: linear-gradient(
        to bottom,
        oklch(from var(--section-heading-primary) calc(l * 1.1) calc(c * 0.9) h),
        var(--section-heading-primary)
    );

    box-shadow: 0 0.4rem 0.8rem #0002;

    position: relative;

    & .stipples {
        pointer-events: none;
        position: absolute;
        right: 0;
        top: -0.2rem;

        display: block;
        width: min(80%, 60rem);
        height: calc(100% + 0.4rem);
        background: linear-gradient(
            to top,
            oklch(from var(--section-heading-primary) calc(l * 1.2) calc(c * 1.1) calc(h + 10)),
            oklch(from var(--section-heading-primary) calc(l * 1.3) calc(c * 1.1) calc(h + 30))
        );
        border: 0 solid oklch(from var(--section-heading-primary) calc(l * 1.05) c calc(h + 10));
        border-top-width: 0.2rem;
        border-bottom-width: 0.2rem;

        --section-heading-stipples: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22150%22%20viewBox%3D%220%200%20600%20150%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22a%22%20r%3D%22.707%22%3E%3Cstop%20stop-color%3D%22%23000f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230000%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22b%22%3E%3Cstop%20stop-color%3D%22%230000%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000f%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22d%22%20width%3D%2232%22%20height%3D%2232%22%20patternTransform%3D%22rotate%2815%29%22%20patternUnits%3D%22userSpaceOnUse%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22url%28%23a%29%22%20d%3D%22M0%200h16v16H0z%22%2F%3E%3C%2Fpattern%3E%3Cfilter%20id%3D%22c%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeComponentTransfer%3E%3CfeFuncA%20intercept%3D%22-16%22%20slope%3D%2232%22%20type%3D%22linear%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Cmask%20id%3D%22e%22%20mask-type%3D%22alpha%22%3E%3Crect%20width%3D%2250%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23b%29%22%2F%3E%3Crect%20width%3D%2250%25%22%20height%3D%22100%25%22%20x%3D%2250%25%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url%28%23c%29%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url%28%23d%29%22%20mask%3D%22url%28%23e%29%22%2F%3E%3Crect%20width%3D%2250%25%22%20height%3D%22100%25%22%20x%3D%2250%25%22%20fill%3D%22url%28%23b%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        mask-image: var(--section-heading-stipples);
        mask-repeat: no-repeat;
        mask-position: 0% 50%;
    }

    & h2 {
        grid-column: center-start 1 / center-end 6;
        position: relative; /* stack on top of stipples */

        font-size: 180%;
        line-height: 1.3;
        text-wrap: balance;

        font-weight: 500;

        --text-shadow-color: color-mix(in srgb, var(--section-heading-primary), black 60%);
        text-shadow:
            0.05rem 0.05rem 0 var(--text-shadow-color),
            0.1rem 0.1rem 0 var(--text-shadow-color),
            0.15rem 0.15rem 0 var(--text-shadow-color),
            0.2rem 0.2rem 0 var(--text-shadow-color),
            0.25rem 0.25rem 0 var(--text-shadow-color),
            0.3rem 0.3rem 0 var(--text-shadow-color);

        & strong {
            font-weight: 850;
        }
    }

    &.lite {
        background: none;
        box-shadow: none;
        border-color: color-mix(in srgb, var(--background-color), var(--text-color) 20%);

        & h2 {
            text-shadow: none;
            color: var(--text-color);
            background-color: var(--background-color);

            font-size: 140%;
            font-weight: 700;

            width: max-content;
            padding: 0.4rem 0.8rem;
            margin: -0.4rem -0.8rem;
            border-radius: 0.6rem;
        }
    }
}

.template-tiles {
    margin: var(--heading-margin) 0;

    & > ul {
        grid-column: center-start 1 / center-end 6;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
        gap: 2rem 2rem;

        @media (max-width: 500px) {
            /* Is there a cleaner way to do this? */
            grid-template-columns: 1fr;
        }

        & > li {
            display: block;
            padding: 2rem 2rem;

            --tile-color: magenta;
            &:nth-child(6n + 1) {
                --tile-color: var(--p-foreground-green);
            }
            &:nth-child(6n + 2) {
                --tile-color: var(--p-foreground-purple);
            }
            &:nth-child(6n + 3) {
                --tile-color: var(--p-foreground-red);
            }
            &:nth-child(6n + 4) {
                --tile-color: var(--p-foreground-pink);
            }
            &:nth-child(6n + 5) {
                --tile-color: var(--p-foreground-blue);
            }
            &:nth-child(6n + 6) {
                --tile-color: var(--p-foreground-sea);
            }
            background-color: color-mix(
                in oklab,
                var(--tile-color),
                var(--p-background-off-white) 93.5%
            );

            border-radius: 1rem;
            border: 0.1rem solid var(--tile-color);
            background-clip: padding-box;

            & h3 {
                padding: 0 1.6rem;
                margin: 0 -1.6rem;
                margin-bottom: 0.33lh;

                font-size: 135%;
                font-weight: 800;
                text-wrap: balance;

                box-shadow: -8px 0px 0px 0px var(--tile-color);
            }
        }
    }
}

.template-section-progress-bar {
    position: sticky;
    top: 0;
    margin-bottom: -100dvh;
    z-index: 100;

    grid-column: right-padding / -1;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.2rem;

    pointer-events: none;
    & > * {
        pointer-events: all;
    }

    & > ol {
        --roundness: 0.4rem;

        margin: 1rem;
        border-radius: var(--roundness);
        overflow: hidden;

        & > li {
            height: 1lh;

            & a {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: max-content;

                text-decoration: none;
                color: var(--text-color);
                padding: 0 0.4rem;
                background-color: var(--background-color);
                border-top-right-radius: var(--roundness);
                border-bottom-right-radius: var(--roundness);

                &::before {
                    content: "";

                    display: block;
                    width: 0.8rem;
                    height: 0.8rem;

                    background-color: transparent;
                    border: 0.1rem solid var(--text-color);
                    border-radius: 9999rem;

                    margin-right: 0.5ch;

                    transition:
                        background-color var(--transition-duration),
                        transform var(--transition-duration);
                }
            }

            &.selected,
            &:has(a:hover) {
                /* Section progress bar is managed by JavaScript to dynamically adjust opacity by distance
                    to the element, to override that behaviour !important seems necessary. */
                opacity: 1 !important;

                & a::before {
                    background-color: var(--text-color);
                    transform: scale(90%);
                }
            }
        }
    }

    /* The same value of max-width is used in section_progress_bar.js script to unsubsribe unnecessary events. */
    @media (max-width: 1100px) {
        display: none;
    }
}

:is(h2, h3, h4, h5, h6) > a:any-link {
    text-decoration: none;
    color: inherit;
}

.template-page-base-footer {
    display: flex;
    flex-direction: row;
    padding: 1lh 3ch;
    margin-top: 2lh;

    border-top: 0.2rem dashed var(--border-2);

    & .copyright {
        text-wrap: nowrap;
    }

    & > ul.links {
        list-style: none;
        display: flex;
        flex-direction: row;

        margin-left: auto;

        & a,
        & a:visited {
            color: var(--text-color);
        }
    }

    @media (max-width: 580px) {
        flex-direction: column;

        & > ul.links {
            margin-left: 0;
        }
    }
}