:root {
    --vertical-cutoff: 940px;
}

.portrait.scroll {
    align-items: center;
}

/*
    cursed, ensure that the navbar is clickable
    sacrifies scrollability.

    this is a hack. real solution is `position: fixed` or some such. not this shit.
*/
.portrait .scroll-content {
    pointer-events: none;

    /*
      this fails jigsaw and vnu.
      but it's baseline 2023.
      https://caniuse.com/css-nesting
    */
    * {
        pointer-events: all;
    }
}

.content-split,
.outer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
}

body {
    height: 100vh;
}

.content-split>* {
    height: 100%;
}

.outer {
    height: calc(var(--vertical-cutoff) * 1.5);
    width: 100%;
}

.outer>* {
    height: calc(var(--vertical-cutoff) * 0.5);
}

.content-split {
    height: fit-content;
    width: 100%;
}

.content-split>* {
    width: 100%;
    height: calc(var(--vertical-cutoff) * 0.5);
}

/* calc(var(--vertical-cutoff) * 1.5) */
@media (min-height: 1410px) {
    .outer {
        height: 100%;
    }

    .outer>* {
        height: calc(100% / 3);
    }

    .content-split {
        height: 100%;
    }

    .content-split>* {
        height: calc(100% / 3);
    }

    body {
        overflow: hidden;
    }
}

.portrait {
    text-align: center;
}

/*
  note: empty prop here fails vnu.
  but this is valid CSS.
  https://drafts.csswg.org/css-variables/#defining-variables
*/
.portrait img {
    margin: var(--pico-typography-spacing-vertical) 0;

    /* default color is fine on light mode */
    --drop-shadow-color: ;
    filter: drop-shadow(0 0 12px var(--drop-shadow-color));
}

@media (prefers-color-scheme: dark) {
    .portrait img {
        --drop-shadow-color: black;
    }
}

@media (min-width: 1024px) {
    body {
        height: 100vh;
    }

    .outer {
        height: 100%;
    }

    :root {
        --height-of-navbar: calc(1em * var(--pico-line-height) + 2*var(--pico-typography-spacing-vertical));
        --portrait-margin-offset: calc(var(--pico-typography-spacing-vertical) - var(--height-of-navbar));
        --portrait-margin-offset: calc(-1 * var(--height-of-navbar));
    }

    .portrait {
        margin-top: var(--portrait-margin-offset);
        height: 100%;
    }

    .portrait-pane {
        height: calc(35% - var(--portrait-margin-offset));
    }

    .content-split {
        height: calc(65% + var(--portrait-margin-offset));
    }

    .content-split {
        /*
            why can't CSS align this with 50% children and figure out that i want them horizontally?
            it's only possible with flex. why. who hurt you, w3c?

            showed this to my teacher and he said "ok just use flex here then"

            i can get this to look fine if the children are `display: table-cell`
            but that's weird and fucky and nonstandard and invalid according to spec.
            so we're using flex. just this once. i promise.
        */
        display: flex;
    }

    .content-split>* {
        width: 50%;
        height: 100%;
        display: inline-block;
    }
}

/*
  note: this fails vnu.
  but it's baseline 2023.
  https://caniuse.com/css-has
*/
:has(h1) {
    text-align: center;

}

h1 {
    margin-top: 1rem;
    margin-bottom: 0;
}

.scroll {
    text-align: left;
    overflow-y: hidden;
}

h1+.scroll {
    /*
        these vars are specific to h1 of pico.css,
        but this isn't h1, so i manually introduce magic values

        i would use flex, but i'm not allowed in this project
        and unlike the previous instance, i can actually do this without flex.

        height: calc(100% - var(--pico-font-size) * var(--pico-line-height) - 1rem);
                                                                           // ^^^^ margin-top defined above
    */
    height: calc(100% - 2rem * 1.125 - 1rem);
}

.scroll-content {
    height: 100%;

    --vertical-padding: var(--pico-typography-spacing-vertical);
    --horizontal-paddding: 1rem;
    padding: var(--vertical-padding) var(--horizontal-paddding);

    overflow-y: scroll;

    --scroll-shadow: var(--pico-background-color);
    --scroll-shadow-size: calc(var(--vertical-padding) * 1);
    mask:
        /*
          make the content fade out in the vertical padding, to indicate scrollability
          mask only cares about the alpha channel. "white" really means "opaque"
        */
        linear-gradient(to bottom,
            transparent 0%,
            white calc(0% + var(--scroll-shadow-size)),
            white calc(100% - var(--scroll-shadow-size)),
            transparent 100%),
        /*
          this second layer of the mask is to make sure the horizontal padding is *always* opaque.
          because we don't want to fade out the scrollbar.

          in this one, we define hard stops at the padding edges.
        */
        linear-gradient(to right,
            white 0%,
            white calc(0% + var(--horizontal-paddding)),
            transparent calc(0% + var(--horizontal-paddding)),
            transparent calc(100% - var(--horizontal-paddding)),
            white calc(100% - var(--horizontal-paddding)),
            white 100%);
}

.info-pane ul {
    padding-left: 0;

}

.info-pane ul li {
    list-style-type: none;
}