:root {
    --font: "Fira Sans Condensed", sans-serif;
    --size: 18px;
    --ground: #f6efe0;
    --ink: #1c1b2c;
    --muted: #56546a;
    --accent: #4b4a72;
}

body {
    max-width: 42em;
    margin: 2em auto;
    padding: 0 1em;
    font-family: var(--font);
    font-size: var(--size);
    line-height: 1.5;
    color: var(--ink);
}

h1 {
    font-size: 3.6em;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0.6em 0 0.5em;
}

p + h1 {
    font-size: 2.4em;
}

h2 {
    font-size: 1.9em;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 1.8em;
}

h3 {
    font-size: 1.2em;
    font-weight: 700;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--accent);
}

h2 ~ p > a:first-child {
    font-weight: 700;
}

i {
    color: var(--muted);
}

li::marker {
    color: var(--accent);
}

.about {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

.about .side {
    flex: 0 0 10em;
}

.about .side img {
    width: 100%;
    display: block;
}

.about p:first-child {
    margin-top: 0;
}

.links {
    display: flex;
    justify-content: center;
    gap: 0.9em;
    list-style: none;
    padding: 0;
    margin: 0.7em 0 0;
}

.links a {
    display: block;
    color: var(--ink);
}

.links a:hover {
    color: var(--accent);
}

.links svg {
    display: block;
    width: 1.3em;
    height: 1.3em;
}

.about .side img, .grid img {
    border-radius: 3px;
}

pre {
    overflow-x: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 0.5em;
}

.grid img {
    width: 100%;
    display: block;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.gallery figure {
    position: relative;
    flex: var(--a) 1 calc(var(--a) * 8em);
    min-width: 0;
    margin: 0;
}

.gallery img {
    height: auto;
    border-radius: 3px;
    cursor: zoom-in;
}

.gallery figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 2.2em 0.7em 0.5em;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(#0000, #000a);
    color: #fff;
    font-size: 0.8em;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.gallery figure:hover figcaption {
    opacity: 1;
}

.place {
    font-weight: 700;
}

.region {
    display: block;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.8;
}

.zoom {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: #f6efe0f7;
    cursor: zoom-out;
}

.zoom img {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 3px;
    transform-origin: 0 0;
}

.zoom p {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.3;
}

.zoom .region {
    color: var(--muted);
}

@media (hover: none) {
    .gallery figcaption {
        opacity: 1;
    }
}

.tier-s {
    grid-template-columns: repeat(3, 1fr);
}

.tier-a {
    grid-template-columns: repeat(5, 1fr);
}

.tier-b {
    grid-template-columns: repeat(7, 1fr);
}

@media (max-width: 36em) {

    .gallery figure {
        flex-basis: calc(var(--a) * 5em);
    }

    .tier-s {
        grid-template-columns: repeat(2, 1fr);
    }

    .tier-a {
        grid-template-columns: repeat(3, 1fr);
    }

    .tier-b {
        grid-template-columns: repeat(4, 1fr);
    }

    h1 {
        font-size: 2.6em;
    }

    .about {
        flex-direction: column;
    }
}

html {
    --e: calc(50% - min(378px, 50% - 18px));
    background:
        linear-gradient(to right, rgba(246, 239, 224, 0) calc(var(--e) - 180px), rgba(246, 239, 224, 0.11) calc(var(--e) - 130px), rgba(246, 239, 224, 0.59) calc(var(--e) - 30px), rgba(246, 239, 224, 0.7) calc(var(--e) + 20px), rgba(246, 239, 224, 0.7) calc(100% - var(--e) - 20px), rgba(246, 239, 224, 0.59) calc(100% - var(--e) + 30px), rgba(246, 239, 224, 0.11) calc(100% - var(--e) + 130px), rgba(246, 239, 224, 0) calc(100% - var(--e) + 180px)),
        url(assets/bg-bone.webp) center top / 1920px repeat,
        var(--ground);
}

.entry {
    font-style: italic;
}

.entry .head {
    font-style: normal;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    font-size: 1.15em;
    font-weight: 700;
}

.entry .sub {
    display: block;
}

.entry .sub span {
    white-space: nowrap;
}

@media (min-width: 36em) {
    .entry .sub {
        max-width: 75%;
    }
}

.entry .year {
    white-space: nowrap;
}

.entry .venue {
    width: 1em;
    height: 1em;
    object-fit: contain;
    vertical-align: -0.15em;
    margin-right: 0.2em;
}


.game {
    position: relative;
    display: block;
}

.game::before {
    content: "";
    position: absolute;
    top: 0;
    left: 3%;
    width: max(12px, 9%);
    aspect-ratio: 3 / 4;
    background: no-repeat center / contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.tier-s .game::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20d%3D%22M5%200h6l3%2012H8z%22%20fill%3D%22%232b4f9e%22/%3E%3Cpath%20d%3D%22M19%200h-6l-3%2012h6z%22%20fill%3D%22%23d9442b%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%2210%22%20fill%3D%22%23c9961a%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%227.5%22%20fill%3D%22%23f5c542%22/%3E%3Cpath%20d%3D%22M12%2016.5l1.4%202.9%203.1.4-2.3%202.2.6%203.1-2.8-1.5-2.8%201.5.6-3.1-2.3-2.2%203.1-.4z%22%20fill%3D%22%23a87a0c%22/%3E%3C/svg%3E");
}

.tier-a .game::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20d%3D%22M5%200h6l3%2012H8z%22%20fill%3D%22%232b4f9e%22/%3E%3Cpath%20d%3D%22M19%200h-6l-3%2012h6z%22%20fill%3D%22%23d9442b%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%2210%22%20fill%3D%22%23a9b0b8%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%227.5%22%20fill%3D%22%23dfe3e8%22/%3E%3Cpath%20d%3D%22M12%2016.5l1.4%202.9%203.1.4-2.3%202.2.6%203.1-2.8-1.5-2.8%201.5.6-3.1-2.3-2.2%203.1-.4z%22%20fill%3D%22%238a929b%22/%3E%3C/svg%3E");
}

.tier-b .game::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20d%3D%22M5%200h6l3%2012H8z%22%20fill%3D%22%232b4f9e%22/%3E%3Cpath%20d%3D%22M19%200h-6l-3%2012h6z%22%20fill%3D%22%23d9442b%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%2210%22%20fill%3D%22%23a8662e%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2221%22%20r%3D%227.5%22%20fill%3D%22%23d99a5b%22/%3E%3Cpath%20d%3D%22M12%2016.5l1.4%202.9%203.1.4-2.3%202.2.6%203.1-2.8-1.5-2.8%201.5.6-3.1-2.3-2.2%203.1-.4z%22%20fill%3D%22%238a5020%22/%3E%3C/svg%3E");
}

.games + .games {
    margin-top: 1.2em;
}

.fold {
    margin-top: 2.6em;
}

.fold > h2 {
    position: relative;
    margin: 0 0 0.6em;
}

.fold > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.12em;
    height: 3px;
    width: 100%;
    background: var(--accent);
    transition: width 0.45s ease, opacity 0.35s ease;
}

.fold:not(.open) > h2::after {
    width: var(--tw, 4em);
    opacity: 0.5;
}

.fold > h2 button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s, transform 0.25s ease;
}

.fold:not(.open) > h2 button {
    color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.fold > h2 button:hover {
    color: var(--ink);
    transform: translateX(0.18em);
}

.reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.45s ease, opacity 0.35s ease, visibility 0s 0.45s;
}

.reveal.open,
.fold.open .reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.reveal-inner {
    min-height: 0;
    overflow: hidden;
}

.authors {
    font-style: italic;
}

.venue-line {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 700;
}

.venue-line .venue {
    width: 1.1em;
    height: 1.1em;
    object-fit: contain;
}

.teaser {
    width: 100%;
    display: block;
    border-radius: 3px;
}

.copy-bib {
    position: relative;
}

.copy-bib::after {
    content: "Copied";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.35em);
    padding: 0.15em 0.5em;
    border-radius: 3px;
    background: var(--ink);
    color: var(--ground);
    font-size: 0.75em;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 0.2em);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.copy-bib.copied::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.paper h1 {
    font-size: 2.4em;
}

.home-link {
    margin-top: 3em;
}

.home-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 700;
}

.home-link svg {
    width: 1.1em;
    height: 1.1em;
}

.paper-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin: 0 0.3em;
}

.paper-links a:first-child {
    margin-left: 0;
}

.paper-links svg {
    width: 1em;
    height: 1em;
}

.paper .fold p {
    font-style: italic;
}

.ffwd {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    border: 2px solid var(--accent);
    border-radius: 8px;
    background: #000;
}

.more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.more:hover {
    color: var(--accent);
}

#interests > .reveal-inner {
    overflow-x: visible;
    overflow-y: clip;
}

.tetra {
    --bleed: max(0px, min(10em, (100vw - 100%) / 2 - 24px));
    display: block;
    width: calc(100% + 2 * var(--bleed));
    margin-inline: calc(-1 * var(--bleed));
    margin-block: -0.4em 0.2em;
    cursor: grab;
    touch-action: pan-y;
}