@import url("/fonts.css");

:root {
    --page-background:#333;
    --surface-background: #0008;
    --text-color: white;
    --link-color: #c6a7d7;
    --link-color-visited: #9786d5;
    --link-color-external: #d586b6;
    --link-color-external-visited: #e6457a;

    --font-family-heading: Aileron, Arial, sans-serif;
    --font-family-body: "Mplus2", Arial, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    color: white;
    background: var(--page-background);
    font-family: var(--font-family-body);
    font-weight: 300;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 200;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

a {
    color: var(--link-color);
    font-weight: bolder;

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

    &:not([href^="/"]):not([href^="./"]):not([href^="../"]) {
        color: var(--link-color-external);

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

input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;

    label:has(&) {
        --top: .6em;
        --left: .2em;
        --box-size: .5em;
        --border-size: 1px;
        --inner-offset: max(1px, .05em);
        --inner-size: max(calc(var(--box-size) - 2 * var(--border-size) - 2 * var(--inner-offset)), 2px);

        position: relative;
        padding-left: calc(var(--box-size) + .45em);
        padding-right: .2em;
        border: solid 1px transparent;

        &:has(input:focus) {
            border: solid 1px currentcolor;
        }

        &::before {
            content: ' ';
            display: inline-block;
            position: absolute;
            top: var(--top);
            left: var(--left);
            width: var(--box-size);
            height: var(--box-size);
            border: solid var(--border-size) currentcolor;
            box-sizing: border-box;
        }

        &:has(input:checked)::after {
            content: ' ';
            display: inline-block;
            position: absolute;
            top: calc(var(--top) + var(--border-size) + var(--inner-offset));
            left: calc(var(--left) + var(--border-size) + var(--inner-offset));
            width: var(--inner-size);
            height: var(--inner-size);
            background: currentcolor;
        }
    }
}


.body-d116608 {
    position: relative;
}

.background-d116608 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column-reverse;
    background-image: url(/images/entry/bg.jpg);
    background-size: cover;
    background-position: center;
    transition: transform .4s ease-in, opacity .4s ease-in;
    opacity: 1;
}

.banner-d116608 {
    width: 100%;
    margin-bottom: 15vh;
    min-height: 30vh;
    background: var(--surface-background);
    box-sizing: border-box;
    padding: 0 max(calc((100vw - 800px) / 2), 16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(to bottom, #0004 0%, #0009 30%, #000c 80%, #000f 100%);
    border-top: solid 1px #fff3;
    border-bottom: solid 1px #fff3;
    backdrop-filter: blur(12px) saturate(.7) contrast(.85);
}

.grow-d116608 {
    transform: scale(1.5);
    opacity: 0;
}

.checkboxes-d116608 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.call-to-action-d116608 {
    text-align: center;
}

/* Landscape backgrounds */
@media (orientation: landscape) and (max-width: 1999px) {
    .body-d116608 {
        background-image: url("/images/entry/bg-ls-1k-ld.webp");
        background-image: image-set(
            "/images/entry/bg-ls-1k-ld.webp" .5x,
            "/images/entry/bg-ls-1k-md.webp" .8x,
            "/images/entry/bg-ls-1k-hd.webp" 1x
        );
    }
}
@media (orientation: landscape) and (min-width: 2000px) {
    .body-d116608 {
        background-image: url("/images/entry/bg-ls-2k-ld.webp");
        background-image: image-set(
            "/images/entry/bg-ls-2k-ld.webp" .5x,
            "/images/entry/bg-ls-2k-md.webp" .8x,
            "/images/entry/bg-ls-2k-hd.webp" 1x
        );
    }
}
@media (orientation: landscape) and (min-width: 3000px) {
    .body-d116608 {
        background-image: url("/images/entry/bg-ls-4k-ld.webp");
        background-image: image-set(
            "/images/entry/bg-ls-4k-ld.webp" .5x,
            "/images/entry/bg-ls-4k-md.webp" .8x,
            "/images/entry/bg-ls-4k-hd.webp" 1x,
        );
    }
}

/* Portrait backgrounds */
@media (orientation: portrait) and (max-width: 950px) {
    .body-d116608 {
        background-image: url("/images/entry/bg-pt-800-ld.webp");
        background-image: image-set(
            "/images/entry/bg-pt-800-ld.webp" .5x,
            "/images/entry/bg-pt-800-md.webp" .8x,
            "/images/entry/bg-pt-800-hd.webp" 1x,
        );
    }
}
@media (orientation: portrait) and (min-width: 951px) {
    .body-d116608 {
        background-image: url("/images/entry/bg-pt-1200-ld.webp");
        background-image: image-set(
            "/images/entry/bg-pt-1200-ld.webp" .5x,
            "/images/entry/bg-pt-1200-md.webp" .8x,
            "/images/entry/bg-pt-1200-hd.webp" 1x,
        );
    }
}


.poem-5182da4 {
  text-align: center;
  font-size: .95em;
  opacity: .8;
  font-style: italic;

  & p {
    margin: 4px;
  }
}

.poem-5182da4 span[data-flicker] {
  display: inline-grid;
  grid-template-columns: 1fr;
  user-select: all;

  &::before {
    content: attr(data-initial);
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 100%;
  }

  &::after {
    content: attr(data-flicker);
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    width: 100%;
    background: var(--page-background);
    opacity: 0;
    animation: 35s linear infinite alternate flicker;
  }
}


@keyframes flicker {
    0% { opacity: 0; }
   49% { opacity: 0; }
   51% { opacity: 1; }
  100% { opacity: 1; }
}


/* Some layout math for various screens */
:root:has(.body-8833f17) {
    --column-margin: 32px;

    --max-flex-layout: 1200px;
    --min-flex-layout: 900px;
    --flex-target: 60vw;
    --collapse-limit: calc(100vw - (2 * var(--column-margin)));

    --flex-width: clamp(var(--min-flex-layout), var(--flex-target), var(--max-flex-layout));
    --layout-width: min(var(--flex-width), var(--collapse-limit));
    --outside-margin: calc((100vw - var(--layout-width)) / 2);
}

.body-8833f17 {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    column-gap: 0;
    grid-template-columns: var(--outside-margin) fit-content(300px) var(--column-margin) var(--column-margin) 1fr var(--outside-margin);
    grid-template-rows: 100%;
    background: transparent;

    &::after {
        z-index: -1;
        content: ' ';
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        background-image: url(/images/column-bg.webp);
        background-size: cover;
        background-position: center right;
        pointer-events: none;
    }

    &::before {
        z-index: 0;
        content: ' ';
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        background: #0004;
        backdrop-filter: blur(1px) contrast(1.1) brightness(1.5);
        pointer-events: none;
    }

    & > nav {
        z-index: 1;
        box-sizing: border-box;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    & > main {
        box-sizing: border-box;
        grid-column: 5 / 7;
        grid-row: 1 / 2;
        overflow-y: auto;
        border-left: solid 1px #fff3;
    }
}

.body-8833f17 nav {
    display: flex;
    flex-direction: column;
    padding: var(--column-margin) 0;
    justify-content: center;

    & > ul {
        display: contents;
        padding: 0;

        & li { list-style: none; }
    }

    & h1, & li a {
        margin: 0;
        box-sizing: border-box;
        height: 40px;
        font-size: 24px;
        display: block;
        border-left: solid 3px transparent;
        padding: 6px 16px;
        padding-right: calc(8px + var(--column-margin));
        margin-right: calc(-1 * var(--column-margin));
    }

    & li a {
        font-size: 18px;
        text-decoration: none;
        transition-property: background;
        transition-duration: .35s;
        transition-timing-function: ease-in-out;

        &:hover {
            transition-property: border-color, background;
            border-left: solid 3px white;
            background: #fff2;
            transition-duration: .2s;
        }
    }

    & li.selected-8833f17 a {
        color: #fffc;

        &:not(:hover) {
            border-left: solid 3px #888;
        }
    }

    & li.unselected a {
        transition-property: border-color;
        transition-duration: .2s;
    }
}

.body-8833f17 main {
    --inner-size: min(800px, calc(100% - var(--outside-margin)));
    --inner-margin: calc(100% - var(--outside-margin) - var(--inner-size));
    margin-left: calc(-1 * var(--column-margin));
    padding-left: calc(var(--inner-margin) / 2 + var(--column-margin));
    padding-right: calc(var(--inner-margin) / 2 + var(--outside-margin));
    background: var(--page-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.body-8833f17 main.hidden > * {
    opacity: 0;
    transition: .3s linear opacity;
}

.body-8833f17 main.showing > * {
    opacity: 1;
    animation: .3s fadein;
}

@keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}