:root {
    text-decoration-skip-ink: none;

    ----text-color: 210deg 14% 12%;
    --text-color: hsl(var(----text-color));
    --text-light: hsl(var(----text-color) / 80%);

    ----dark-gray: 0deg 0% 50%;
    ----bark-blue: 220deg 100% 50%;
    --link-selected-background: hsl(var(----bark-blue));
    --link-background: unset;
    --link-light-background: unset;
    --link-hover-background: hsl(var(----dark-gray) / 7%);
    --link-focus-background: hsl(var(----bark-blue) / 7%);
    --link-active-background: hsl(var(----bark-blue) / 15%);
    --link-color: var(--link-selected-background);
    --selected-color: #eee;

    --page-background: #fff;
    --background-color: #dedede3b;
    --background-dark: linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.03));
    --background-darker: linear-gradient(rgba(0,0,0,.07), rgba(0,0,0,.07));
    --background-night: linear-gradient(rgba(0,0,0,.13), rgba(0,0,0,.13));

    --font-size: 19.3px;
    --font-small: 16px;
    --font-medium: 17px;
    --font-text: Charter, "Times New Roman", Georgia, serif;
    --font-label: sans-serif;
    --font-label-space: .2px;

    --margin: unset;
    --space-bottom: unset;
    --layout-width: 1400px;
    --layout-space-x: max(24px, min(4.6vw, 68px));
    --layout-space-x-all: calc(var(--layout-space-x) * 2);
    --layout-space-y: 2.3em;
    --layout-space-excluded: calc(var(--layout-space-x) * -1);

    --thumb-height: 130px;
    --thumb-fallback-color: #f2f2f2;
    --thumb-background: unset;
    --transition: .35s cubic-bezier(.2,1,.4,1);
    --curve: 5px;
    --round: 40px;
}

.ui-size {
    max-width: var(--layout-width);
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.ui-size .full-width {
    --margin: calc((100% - 100vw) / 2);
    width: 100vw;
    padding: 0;
    margin-right: var(--margin);
    margin-left: var(--margin);
    box-sizing: border-box;
}
.ui-space {
    padding: var(--layout-space-y) var(--layout-space-x);
    box-sizing: border-box;
}
.ui-size .full-width .ui-space {
    padding-top: unset;
    padding-bottom: unset;
    margin-top: var(--layout-space-y);
    margin-bottom: var(--layout-space-y);
}
.ui-nospace-onmobile {
    clear: both;
}

@media (hover: hover) and (pointer: fine) {
    /* Hover-primary devices */
    html {
        scrollbar-width: thin;
        scrollbar-color: #292126b5 transparent;
    }
    .subnav {
        scrollbar-width: thin !important;
    }
    .subnav::-webkit-scrollbar {
        display: unset !important;
    }
    a:hover {
        --link-light-background: var(--link-hover-background);
    }
    a:not(.selected, .active, :focus-visible, :active):hover,
    .bar:not(:focus-visible, :active):hover,
    summary:hover:after {
        --link-background: var(--link-hover-background);
    }
    .tab .selected:hover {
        background-image: var(--background-darker);
    }
    .tag:hover:not(:focus-visible, :active) {
        background-image: var(--background-dark);
    }
    .button:hover {
        background-image: var(--background-darker);
    }
    .thumb-item:hover {
        --thumb-background: var(--thumb-fallback-color);
    }
    .thumb-item:hover .thumb-title {
        transform: translateY(0);
    }
    .reproduction:hover {
        background-color: var(--selected-color);
    }

    @supports (overflow-y: overlay) {
        html {
            overflow-y: overlay !important;
            scrollbar-gutter: stable both-edges;
        }
        ::-webkit-scrollbar {
            width: 19px;
            height: 19px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #292126b5;
            background-clip: padding-box;
            border: 5px solid rgba(0,0,0,0);
            border-radius: 12px;
            box-shadow: inset 0 0 0 1px #fff1e542,
                        inset 0 0 2px #0000005c;
        }
        :not(:hover)::-webkit-scrollbar-thumb {
            background-color: #29212630;
            box-shadow: none;
        }
    }
}

:focus-visible {
    outline: unset;
}
::-webkit-scrollbar-thumb {
    min-height: 62px;
}
::selection {
    color: initial;
    text-shadow: none;
    background-color: #3a99ff4d;
}
::placeholder {
    color: var(--text-color);
    /* Chrome and Safari 9.1.1 input applies inline CSS "text-overflow: clip" */
    text-overflow: ellipsis !important;
    user-select: none;
}
[placeholder]:focus::placeholder {
    opacity: .54;
}
.error ::placeholder {
    color: #c00;
}

html,
body {
    min-height: 100%;
}
html,
label,
button,
.noselect {
    -webkit-user-select: none; /* Safari legacy */
            user-select: none;
}
html {
    overflow: auto;
    overflow-y: scroll;
    scroll-padding-top: 100px;
    font: 62.45% / 32px var(--font-text);
    text-rendering: optimizeSpeed;
    color: var(--text-color);
    background-color: var(--page-background);
    /* Smoother scroll, faster clicks https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away */
    touch-action: manipulation;
    cursor: default;
    caret-color: currentcolor;
}
body,
dl,
dd,
figure {
    margin: 0;
}
body {
    font-size: var(--font-size);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@supports (hyphenate-limit-chars: 6 3 2) {
    body {
        hyphenate-limit-chars: 6 4 3;
        -webkit-hyphens: inherit; /* Safari legacy */
                hyphens: auto;
    }
}

main {
    -webkit-user-select: text; /* Safari legacy */
            user-select: text;
}
h1,
h2 {
    margin-bottom: .67em;
    font-family: var(--font-label);
    line-height: 1.11;
    text-wrap: balance;
}
h1 {
    margin-top: .67em;
    font-size: 32px;
}
h2 {
    margin-top: 1.7em;
    font-size: 22px;
}
h1:first-line,
h2:first-line,
.n:first-line {
    font-size: 126%;
}
h1[data-count]:after {
    content: "(" attr(data-count) ")";
    position: relative;
    top: -3px;
    margin-left: 9px;
    font-size: 22px;
}
.fit-width {
    display: inline-block;
}
.slogan {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 18px;
}
p,
pre,
details {
    margin-top: .8em;
    margin-bottom: .8em;
}
p {
    /* Safari https://stevehickeydesign.com/blog/2012/12/04/hanging-punctuation-with-css/ */
    hanging-punctuation: first;
}
p + p {
    margin-top: 1em;
}
small {
    font-size: 70%;
}
blockquote {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    background-color: var(--background-color);
}
blockquote:before,
blockquote:after {
    /* Full height blockquote respecting float of other elements */
    content: "";
    display: table;
}
blockquote p:first-of-type:before,
.quote:before {
    content: "\201C";
    position: absolute;
    text-indent: -1ch;
}
blockquote p:last-of-type:after,
.quote:after {
    content: "\201D";
    margin-left: 2px;
}
blockquote code,
blockquote pre {
    background-color: var(--selected-color);
}
cite {
    display: block;
    margin-top: .8em;
    margin-bottom: .8em;
    color: var(--text-light);
    font-size: var(--font-small);
    font-style: normal;
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
}
code,
pre {
    font: 80%/1.45 Consolas, Liberation Mono, Courier, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: var(--background-color);
    tab-size: 4;
}
code {
    display: inline-block;
    padding: 0 .4em .1em;
    max-width: 100vw;
}
pre {
    padding: .75em 1.05em;
}
cite:before {
    content: "\2014\00A0";
    color: #999;
}
br {
    word-spacing: 0;
}
a,
input,
select,
textarea,
button {
    font-family: inherit;
    outline: none;
    pointer-events: auto;
}
a,
img {
    -webkit-user-drag: none; /* Chrome legacy */
     -moz-user-select: none; /* Doesn't work on images */
            user-drag: none;
}
img {
    /* Image scaling https://www.456bereastreet.com/lab/scaling-images-proportionally/ */
    max-width: 100%;
    height: auto;
    vertical-align: top;
    object-fit: contain;
    /* Image scale rendering https://drafts.csswg.org/css-images/#the-image-rendering */
    image-rendering: -webkit-optimize-contrast; /* Webkit will drop this property https://bugs.webkit.org/show_bug.cgi?id=97991#c5 */
    image-rendering: crisp-edges; /* Firefox, Safari legacy */
    /* image-rendering: pixelated; */ /* Chrome; Equals non standard "optimizeSpeed" */
}
a img,
abbr,
iframe {
    border: 0;
}
a,
summary:after {
    color: var(--link-color);
    text-decoration: unset;
    text-decoration-color: currentcolor;
    text-decoration-thickness: .8px;
    text-underline-offset: 3px;
    /* touch-action: none; */ /* Chrome Android avoids scroll on touch
                                 Disable double-tap-zoom https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
    -webkit-box-decoration-break: clone; /* Chrome and Webkit legacy, demo https://output.jsbin.com/xojoro/quiet */
            box-decoration-break: clone;
    background-color: var(--link-background, unset);
}
summary:after,
.main a:not([class]),
.footer a:not([class]) {
    text-decoration: underline;
    outline: 4px solid var(--link-background);
    border-radius: var(--curve);
}
a:focus-visible,
a:active,
a.selected {
    --link-light-background: var(--link-focus-background);
}
a:not(.selected, .active):focus-visible,
a:not(.selected, .active):active,
a.active:not(:focus-visible, :active),
summary:active:after {
    text-decoration: unset;
    --link-background: var(--link-focus-background);
}
a.selected {
    --link-color: #fff;
    --link-background: var(--link-selected-background);
}
a.selected:focus-visible,
a.selected:active {
    --link-light-background: var(--link-active-background);
}
a.active:focus-visible,
a.active:active {
    --link-background: var(--link-active-background);
}
a:focus-visible {
    text-decoration: underline;
}
a[target=_blank] {
    text-decoration-style: initial;
}
picture {
    display: inline-block;
}
abbr {
    border-bottom: 1px dotted #aaa;
}
legend {
    display: table;
}
label {
    display: none;
    padding-top: .2em;
    padding-bottom: .2em;
    color: var(--text-light);
    line-height: 1.2;
}
input,
select,
textarea,
button {
    max-width: 100%;
    padding: .6em .75em;
    margin: .15em 0;
    font-size: 1em;
    line-height: 1.25;
    box-sizing: border-box;
}
input,
select,
button {
    vertical-align: middle;
}
input,
select,
textarea {
    width: 20em;
    background-color: var(--background-color);
    border: 1px solid var(--background-color);
    box-shadow: 1px 1px 0 rgba(0,0,0,.14);
}
[type=checkbox],
[type=radio] {
    /* Reset */
    width: auto;
    padding: 0;
    border: 0;
    box-sizing: content-box;
}
textarea {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 4.95em;
    max-height: 13em;
    vertical-align: top;
    word-wrap: break-word;
    resize: none;
}
[required]:valid {
    border-color: #0b0;
    background-color: transparent;
}
select,
button {
    overflow: hidden;
    display: inline-block;
    /* Mobile button text wrapping fix for button */
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: 0;
    cursor: pointer;
}
input:focus,
textarea:focus,
select:focus,
[required]:focus {
    background-color: #fff;
    border-color: #00d;
}
button {
    min-width: 9.4em;
    margin-top: .55em;
    margin-bottom: .55em;
    color: #fff;
    text-align: center;
    background-color: var(--link-selected-background);
    border-right: var(--curve);
    border: unset;
}
[disabled][disabled][disabled] {
    color: #aaa;
    text-decoration: unset;
    text-shadow: 0 1px 1px #fff;
    border-color: #ddd;
    box-shadow: none;
    transition: none;
    pointer-events: none;
    cursor: default;
}
select[disabled],
button[disabled] {
    background-color: rgba(179,179,179,.08);
}
option {
    min-width: 100%;
    max-width: 0;
}
select:focus option {
    background-color: #fff;
}
button:active {
    background-color: #999;
    border-color: #999;
}
[tabindex] {
    outline: 0;
}
[hidden][hidden],
option[value=""],
.nav [data-placeholder] {
    display: none;
}

.noscroll {
    overflow: hidden;
    scrollbar-gutter: unset;
}
.wrapper {
    display: flex;
    flex-direction: column;
    padding-top: var(--layout-space-y);
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}
.container {
    /* TODO */
    display: contents;
}
article {
    margin-bottom: 2em;
}
.error-label,
.error label {
    color: #c00;
}
.error.error input,
.error.error textarea {
    border-color: #c00;
}
address {
    font-style: normal;
}

/* Navigation */
.tab {
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
    text-align: center;
    white-space: nowrap;
    word-wrap: normal;
    background-image: linear-gradient(#fff, #ffffffe6 72%, #ffffffd6);
    /* will-change does not repaint fully .tab.expand height, box-shadow, etc. */
    backface-visibility: hidden;
}
.nav {
    position: relative;
    height: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: auto;
    --link-color: var(--text-color);
    font-size: 19px;
    will-change: transform;
}
.nav ul {
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    height: 100%;
}
.shadow {
    overflow: hidden;
    position: absolute;
    top: 40px;
    right: 0;
    left: 0;
    height: 77px;
    pointer-events: none;
}
.shadow:after,
.tab:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -.8em;
    right: -1em;
    left: -1em;
    pointer-events: none;
    box-shadow: 0 0 var(--layout-space-y) 2em #fff;
}
.tab:before {
    display: none;
}
.nav li {
    overflow: hidden;
}
.nav a {
    display: flex;
    flex: 1;
    align-items: center;
    width: 100%;
    padding-right: .63em;
    padding-left: .63em;
    box-sizing: border-box;
}
.nav span,
.thumb-title span {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .nav span,
    .thumb-title span {
        text-overflow: clip;
        -webkit-mask-image: linear-gradient(to left, rgba(51,51,51,0), #333 1.5em, #333); /* Chrome legacy */
                mask-image: linear-gradient(to left, rgba(51,51,51,0), #333 1.5em, #333);
    }
}
.nav span {
    position: relative;
    /* Fix for  Safari 5.1 legacy fix -webkit-box */
    width: 100%;
    top: -.06em;
    /* Old Webkit legacy */
    max-height: var(--layout-space-y);
}
.home {
    position: relative;
    top: 21px;
    width: 12px;
    height: 7px;
    margin: 0 auto auto;
    background-color: currentcolor;
}
.home:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -4px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid currentcolor;
}
.subnav-container {
    position: relative;
}
.subnav-container:before,
.subnav-container:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    box-shadow: 0 -4em 2em 1em #fff,
                0 -4em 2em 1em #fff,
                0 -4em 2em 1em #fff;
}
.subnav-container:before {
    left: 0;
}
.subnav-container:after {
    right: 0;
}
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    white-space: nowrap;
    word-wrap: normal;
}
.subnav-item.subnav-item {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.3;
    padding-top: 8px;
    padding-bottom: 8px;
    color: inherit;
    white-space: normal;
    background-color: unset;
}
.subnav-item:before {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    bottom: 0;
    left: -15px;
    background-color: var(--link-light-background);
    border-radius: var(--round);
}
.subnav-text {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 3px;
    margin-top: 15px;
    margin-bottom: 30px;
}
.tag {
    padding: 3px 15px;
    color: inherit;
    font-size: var(--font-medium);
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
    text-decoration: unset;
    --link-light-background: var(--link-hover-background);
    background-color: var(--link-light-background);
    border-radius: var(--round);
}
.share {
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 1em;
    cursor: pointer;
}
.share .social-icon {
    height: 23px;
    aspect-ratio: 1 / 1;
}
.button.button {
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding: 3px 16px;
    max-width: 100%;
    color: #fff;
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
    text-align: center;
    white-space: nowrap;
    line-height: inherit;
    text-decoration: unset;
    text-overflow: ellipsis;
    vertical-align: middle;
    background-color: var(--link-selected-background);
    box-sizing: border-box;
    border: 1px solid var(--link-selected-background);
    border-radius: var(--round);
    -webkit-user-select: none; /* Safari legacy */
            user-select: none;
}
.button:focus-visible,
.button:active {
    background-image: var(--background-night);
}
.button-light:before,
.loading .box:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    --button-light: 137,196,255;
    background-image: linear-gradient(280deg, rgba(var(--button-light),0) 45%, rgba(var(--button-light),.6) 67%, rgba(var(--button-light),0));
    background-repeat: no-repeat;
    animation: light linear 4s infinite;
    pointer-events: none;
}
.loading .box:before {
    --button-light: 255,255,255;
}
@keyframes light {
    from {
        background-position: -400px 0;
    }
    to {
        background-position: 700px 0;
    }
}
.footer {
    color: var(--text-light);
    font: var(--font-small)/30px var(--font-label);
    letter-spacing: var(--font-label-space);
    text-align: start;
    white-space: nowrap;
    word-wrap: normal;
}
.footer.footer a {
    color: inherit;
    text-decoration: unset;
    outline-width: 7px;
}
.footer-content {
    display: flex;
}
.sitemap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.sitemap dl,
.sitemap ol {
    height: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.sitemap .def {
    margin-bottom: 5px;
    font-size: var(--font-medium);
}
.footer-metadata {
    display: flex;
    flex-direction: column;
}
.footer-social {
    display: flex;
}
.footer-social a {
    display: flex;
    aspect-ratio: 1 / 1;
    padding: 9px;
    outline: unset !important;
    border-radius: var(--round) !important;
}
.social-icon {
    height: 18px;
    aspect-ratio: 3.25 / 1.3;
    margin: auto;
}
.footer-copyright {
    display: flex;
    justify-content: center;
    gap: 11px;
    margin-top: 13px;
}
svg {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    fill: currentcolor;
    stroke: none;
    vertical-align: middle;
}
use {
    pointer-events: none;
}

.main {
    position: relative;
    z-index: 1;
    flex: 1;
    padding-bottom: 4vw;
}
.main.error-page {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: var(--layout-space-y);
    padding-bottom: calc(var(--layout-space-y) * 1.8);
}
.cf-details {
    max-width: 530px;
    padding: var(--layout-space-y);
    margin-top: var(--layout-space-y);
    margin-right: auto;
    margin-left: auto;
    background-color: var(--background-color);
    box-sizing: border-box;
}
.cf-details h1 {
    margin-top: 0;
    font-size: var(--font-size);
}
.cf-details p {
    text-align: justify;
}
summary {
    display: inline;
}
details summary {
    pointer-events: none;
}
details summary:after {
    content: "Read more";
    margin-left: .5ch;
    pointer-events: auto;
    cursor: pointer;
}
details[open] summary:after {
    content: "";
    pointer-events: none;
}
.column {
    columns: 2 27em;
    column-gap: var(--layout-space-x-all);
    column-rule: 1px solid var(--selected-color);
}
.column blockquote {
    width: calc(100% + var(--layout-space-x-all));
    margin-right: var(--layout-space-excluded);
    margin-left: var(--layout-space-excluded);
}
.newline {
    display: block;
    clear: both;
}
.reproduction.space {
    margin-right: var(--layout-space-y);
    float: left;
    cursor: zoom-in;
}
.promotions,
.cover,
.p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
}
.cover picture,
.cover img {
    width: 100%;
}
.cover img {
    min-height: 28vh;
    object-fit: cover;
}

.thumb {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-content: flex-start;
    justify-content: space-between;
    padding-top: var(--layout-space-y);
    padding-bottom: 4.8em;
    line-height: 2.2;
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
}
.thumb:after {
    /* Avoid space-between in last row
       Resource https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid */
    content: "";
    flex: auto;
}
.loading .thumb-item {
    pointer-events: none;
}
.thumb-item {
    position: relative;
    flex: .2;
    min-width: fit-content;
    color: transparent;
    text-decoration: unset;
    backface-visibility: hidden;
}
.thumb-item:last-child {
    flex: unset;
}
.thumb-item:before {
    content: "";
    position: absolute;
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    background-color: var(--thumb-background);
    border-radius: var(--curve);
}
.thumb-item:focus-visible,
.thumb-item:active {
    --thumb-background: hsl(219deg 100% 93%);
}
.thumb-item.active {
    --thumb-background: var(--link-selected-background);
}
.nft {
    display: inline-block;
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 21px;
    height: 21px;
    fill: var(--thumb-background, var(--page-background));
    transform: translateY(-163%);
    transition: fill var(--transition);
}
.thumb-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.02em;
    max-height: 41px;
    padding-right: 4px;
    padding-left: 4px;
    color: var(--text-color);
    line-height: 2.2;
    text-align: center;
    text-shadow: 1px 0 0 rgb(255 255 255 / 70%);
    white-space: nowrap;
    word-wrap: normal;
    background-image: linear-gradient(transparent, var(--thumb-background, var(--thumb-fallback-color)) 110%),
                      radial-gradient(ellipse at top, transparent 60%, var(--thumb-background, var(--thumb-fallback-color)) 90%);
    transform: translateY(100%);
    transition: transform var(--transition);
}
.thumb-title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .8;
    background-color: var(--thumb-background, var(--thumb-fallback-color));
}
.thumb .thumb-title {
    font-size: var(--font-small);
}
.active .thumb-title {
    display: none;
}
.thumb-item:focus-visible .thumb-title,
.thumb-item:active .thumb-title {
    transform: translateY(0);
}
.thumb-item:focus-visible .thumb-title,
.thumb-item:active .thumb-title {
    transition-delay: 0s;
}
.box {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    min-height: var(--thumb-height);
        height: 100%;
    background-color: var(--thumb-background, var(--thumb-fallback-color));
}
.thumb img {
    max-height: var(--thumb-height);
        height: 100%;
    object-fit: cover;
    object-position: top;
}
.list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    padding-bottom: 2.5em;
    font-size: var(--font-medium);
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
}
.list .thumb-item {
    aspect-ratio: 1 / 1;
    vertical-align: top;
}
.list img {
    height: 100%;
    object-fit: cover;
    object-position: left;
}
.cover img,
.video iframe {
    background-color: var(--background-color);
}
img[width][width="1"] {
    width: auto;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    outline: solid 1px #808080;
}

.video {
    position: relative;
    max-width: 100vw;
        width: 600px;
    aspect-ratio: 16 / 9;
    margin-top: 30px;
    margin-bottom: 30px;
    clear: both;
    background-color: #000;
}
@supports not (aspect-ratio: 16 / 9) {
    .video {
        padding-bottom: 56.25%;
    }
}
.video iframe {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

.reproduction {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 300px;
    min-height: 300px;
    --space-bottom: calc(var(--layout-space-y) - 2ch);
    margin-top: unset;
    margin-bottom: var(--space-bottom);
    line-height: 128px;
    text-decoration: unset;
    text-align: center;
    vertical-align: top;
    background-color: #f6f6f6;
}
.reproduction:last-of-type {
    margin-bottom: max(var(--space-bottom), 4vw, 30px);
}
.reproduction img {
    width: 100%;
}
.center {
    text-align: center;
}
.center .reproduction {
    margin-right: auto;
    margin-left: auto;
}
.reproduction:before,
.reproduction:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
        width: 50%;
    max-width: 300px;
    height: 20%;
    max-height: 100px;
    box-shadow: 0 15px 10px rgba(51,51,51,.3);
}
.reproduction:before {
    left: 8px;
    transform: rotate(-2deg);
}
.reproduction:after {
    right: 8px;
    transform: rotate(2deg);
}

.details {
    margin-bottom: var(--layout-space-y);
}
.details h1 {
    display: table-cell;
}
.details h1:after {
    display: table-cell;
    min-width: 7.2em;
    margin-top: 0;
    content: "";
    float: left;
}

.spec {
    padding: unset;
    margin: 30px 0 20px;
    list-style: none;
}
.spec div {
    display: inline-block;
    width: 6em;
}
.pubdate {
    display: block;
    margin: .5em 0;
    color: var(--text-light);
    font-size: var(--font-small);
    font-family: var(--font-label);
    letter-spacing: var(--font-label-space);
}

.sideimage {
    float: right;
    margin-left: 1.8em;
    margin-bottom: 1em;
    border-radius: var(--curve);
}

.honeypot {
    display: none;
}

/* Landing page */
.intro-container {
    display: flex;
}
.contents {
    display: contents;
}
.intro {
    margin-top: 38px;
}
.thumb-expanded {
    --thumb-height: clamp(0px, 100%, 140px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--thumb-height), 1fr));
}
.thumb-expanded .thumb-item {
    min-width: unset;
    max-height: unset;
    aspect-ratio: 1 / 1;
}
.thumb-expanded .box {
    min-width: unset;
}
.thumb-expanded img {
    width: auto;
    max-height: 100%;
}
.thumb-span {
    padding: 15px;
    grid-column: 1 / -1;
}
.poster {
    display: contents;
}
.poster img {
    position: relative;
    z-index: -1;
    margin-top: -250px;
}
.sticky-footer {
    position: sticky;
    z-index: 1;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: var(--layout-space-x) !important;
}
.sticky-footer:before {
    content: "";
    position: absolute;
    top: -53px;
    right: 0;
    left: 0;
    bottom: -53px;
    background-image: linear-gradient(
        hsl(0deg 0% 100% / 0%),
        hsl(0deg 0% 100% / 66%) 18%,
        hsl(0deg 0% 100% / 81%) 24%,
        hsl(0deg 0% 100% / 88%) 27%,
        hsl(0deg 0% 100% / 96%) 34%,
        hsl(0deg 0% 100% / 96%) 82%,
        hsl(0deg 0% 100% / 86%) 86%,
        hsl(0deg 0% 100% / 76%) 88%,
        hsl(0deg 0% 100% / 0%)
    );
    pointer-events: none;
}

.count-list ::marker {
    content: counters(list-item,'.') '.';
}
.count-list li {
    padding-left: .5em;
}
.count-list > li {
    margin-top: .85em;
}

.posts {
    list-style: none;
    padding: 0;
}
.posts li {
    position: relative;
}
.posts .absolute {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.posts .more {
    position: relative;
    z-index: 2;
}

@media (-webkit-min-device-pixel-ratio: 0) {
    html {
        -webkit-overflow-scrolling: touch;
    }
    a,
    label,
    input,
    select,
    textarea,
    button,
    [onclick],
    [tabindex][tabindex] {
        /* Remove outline and highlight-color from click-able elements on Android and iOS */
        -webkit-tap-highlight-color: rgba(51,51,51,0);
    }
    ::-webkit-input-placeholder {
        color: var(--text-color);
        /* Chrome 49 input:focus and Safari 9.1.1 input applies inline "text-overflow: clip" */
        text-overflow: ellipsis !important;
        -webkit-user-select: none; /* Safari legacy */
                user-select: none;
    }
    [placeholder]:focus::-webkit-input-placeholder {
        opacity: .54;
    }
    .error ::-webkit-input-placeholder {
        color: #c00;
    }

    @supports (not (-ms-accelerator: true)) and (not (-ms-ime-align: auto)) { /* Webkit, Safari 9+ */
        html {
            /* Old Webkit smooth text rendering issue */
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%; /* iOS fix */
            /* -webkit-perspective: 1000; */ /* Breaks position: fixed
                                                Android repaint issue on screen orientation change */
        }
        a {
            /* iOS remove bubble dialog on tap-holding */
            -webkit-touch-callout: none;
        }
        input {
            -webkit-hyphens: none; /* Safari 9.1 wraps text to multiple lines */
        }
        input[type=search] {
            -webkit-appearance: textfield; /* Safari 9.1 make filed styleable */
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button,
        input[type=search]::-webkit-search-cancel-button {
            display: none;
        }
    }
}
@supports (-moz-appearance: meterbar) { /* Firefox */
    label:active {
        background-color: transparent;
    }
    input,
    select,
    textarea,
    button {
        background-image: none;
        border-radius: unset;
    }
    [placeholder]:not(:focus)::placeholder {
        opacity: 1;
    }
    button::-moz-focus-inner {
        /* Remove button padding */
        border: 0;
        padding: 0;
    }
}

@media (max-width: 980px) {
    .sideimage {
        width: max(100%, 100vw);
        margin-left: 0;
    }
}
@media (min-width: 800px) {
    .show-onmobile.show-onmobile.show-onmobile {
        display: none;
    }
    .nav li {
         display: flex;
         flex: 1;
         border-bottom-right-radius: var(--curve);
         border-bottom-left-radius: var(--curve);
         border-image: linear-gradient(#ddd 10%, rgba(225,225,225,0)) 1;
    }
    .nav li:not(:first-of-type) {
        border-left: 1px solid;
    }
    .nav li:first-child {
        --link-color: #fa0;
        max-width: 3.76em;
    }
    .poster img {
        margin-left: -70px;
        max-width: max(50vw, 496px);
    }
    .subnav-container {
        border-bottom: 1px solid #0000000a;
    }
    .footer {
        border-top: 1px solid #0000000a;
    }
}
@media (max-width: 800px) {
    :root {
        --thumb-height: 90px;
    }
    .show-ondesktop.show-ondesktop.show-ondesktop {
        display: none;
    }
    .noscroll-onmobile {
        overflow: hidden;
        scrollbar-gutter: unset;
    }
    .ui-nospace-onmobile {
        max-width: unset;
            width: 100vw;
        margin-right: var(--layout-space-excluded);
        margin-left: var(--layout-space-excluded);
        border-radius: unset;
    }
    h1 {
        font-size: 29px;
    }
    .details {
        margin-right: var(--layout-space-x);
        margin-left: var(--layout-space-x);
        margin-bottom: unset;
    }
    input:not([type=checkbox], [type=radio]),
    select,
    textarea {
        width: 100%;
    }
    .wrapper {
        padding-top: 0;
    }
    .reproduction:before,
    .reproduction:after {
        display: none;
    }
    .tab,
    .nav {
        top: 0;
        left: 0;
    }
    .tab {
        z-index: 100;
        height: 0;
        text-align: start;
        background-color: unset;
        pointer-events: none;
    }
    .tab:before {
        display: block;
    }
    .bar {
        --link-background: unset;
        position: relative;
        z-index: 3;
        left: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: var(--link-background);
        transition: background-color var(--transition);
        cursor: pointer;
        pointer-events: auto;
    }
    .bar:before {
        content: "";
        position: absolute;
        top: -13px;
        right: -13px;
        bottom: -13px;
        left: -13px;
        border-radius: 50%;
    }
    .bar:focus {
        --link-background: var(--link-focus-background);
    }
    .bar-lines,
    .bar-lines:before,
    .bar-lines:after {
        display: block;
        width: 24px;
        height: 4px;
        background-color: var(--text-color);
        box-shadow: 0 0 3px 1px #ffffff69;
        transition: width .1s,
                    background-color 1ms,
                    border-radius .2s,
                    transform var(--transition);
        will-change: transform;
    }
    .bar-lines {
        position: relative;
        transform: translateY(0);
        transition-duration: .15s;
        pointer-events: none;
    }
    .bar-lines:before {
        content: "";
        position: absolute;
        right: 0;
        transform: translateY(-.42em);
    }
    .tab:not(.expand) .bar-lines:before {
        width: 17px;
    }
    .bar-lines:after {
        content: "";
        position: absolute;
        transform: translateY(.42em);
    }
    .nav span {
        top: inherit;
        max-height: inherit;
    }
    .tab.expand .bar-lines,
    .tab.expand .bar-lines:before,
    .tab.expand .bar-lines:after {
        box-shadow: unset;
        border-radius: var(--curve);
    }
    .expand .bar-lines {
        background-color: transparent;
    }
    .expand .bar-lines:before {
        transform: rotate3d(0,0,1,45deg);
    }
    .expand .bar-lines:after {
        transform: rotate3d(0,0,1,-45deg);
    }
    .nav:before,
    .nav:after {
        content: "";
        display: block;
        position: sticky;
        z-index: 1;
        left: 0;
        height: 3em;
        will-change: transform;
        pointer-events: none;
    }
    .nav:before {
        top: 0;
        background-image: linear-gradient(#fff, rgba(255,255,255,0));
    }
    .nav:after {
        bottom: 0;
        background-image: linear-gradient(rgba(255,255,255,0), #fff);
    }
    .nav,
    .expand .nav:before,
    .expand .nav:after {
            width: 100%;
        min-width: 11.9em;
        max-width: 84vw;
    }
    .nav {
        contain: layout;
        overflow: auto;
        overflow-y: overlay;
        position: fixed;
        bottom: 0;
        color: var(--text-light);
        line-height: 56px;
        background-image: unset;
        transform: translateX(calc(-100% - 1px));
        background-color: #fff;
        /* backface-visibility: hidden; */ /* Causes scrollbar appear under the .active link */ /* will-change breaks pseudo-class position: fixed */
        will-change: auto;
        pointer-events: auto;
    }
    .nav.ui-space {
        padding: 0;
    }
    .menu {
        flex-direction: column;
        height: unset;
    }
    .menu-outer {
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        pointer-events: auto;
    }
    .expand .nav {
        box-shadow: 0 0 4em rgba(51,51,51,.11),
                    0 0 43vw rgba(51,51,51,.3);
        transform: none;
        transition: transform var(--transition);
    }
    .expand .menu-outer {
        display: block;
    }
    .nav-sub {
        display: block;
        font-size: 95%;
    }
    .nav li:not(:first-of-type) {
        border-top: 1px solid var(--background-color);
    }
    .nav.nav li {
        flex: 0;
        background-color: unset;
        border-image: unset;
        border-radius: unset;
    }
    .nav-sub.nav-sub li {
        margin-top: 0;
        margin-bottom: 0;
    }
    .nav a {
        padding-left: var(--layout-space-x);
        padding-right: var(--layout-space-x);
    }
    .nav-sub a {
        padding-left: var(--layout-space-x-all);
    }
    .nav [data-placeholder] {
        display: block;
    }
    .social-icons.social-icons {
        display: flex;
        align-items: center;
        padding-left: var(--layout-space-x);
        padding-right: var(--layout-space-x);
        margin-top: 26px;
    }
    .social-icons.social-icons li {
        display: flex;
        flex: 1;
        height: 56px;
        border-top: unset;
        border-radius: var(--curve);
    }
    .social-icons a {
        padding: unset;
        color: inherit;
    }
    .expand ~ .grayscale-onmobile {
        filter: grayscale(20%);
        transition: filter var(--transition);
    }
    .main {
        padding-bottom: var(--layout-space-y);
    }
    .wrapper {
        padding-bottom: 4.8em;
    }
    .main + .thumb {
        padding-top: calc(var(--layout-space-y) - 1.8em);
    }
    .subnav {
        overflow-x: auto; /* Safari 12 legacy */
        overflow-x: overlay;
        scrollbar-width: none;
        flex-wrap: nowrap;
        scroll-snap-type: both mandatory;
        scroll-padding: 24px;
    }
    .subnav::-webkit-scrollbar {
        display: none;
    }
    .subnav-item {
        scroll-snap-align: start;
    }
    .thumb:not(.thumb-expanded) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--thumb-height), 1fr));
    }
    .thumb:after {
        display: none;
    }
    .thumb img:not([width="1"]) {
        width: 100%;
        max-height: unset;
        image-rendering: pixelated;
    }
    .list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .thumb-item {
        max-height: 170px;
    }
    .thumb-item:not(:hover, :focus-visible, :active, .active):before {
        background-color: unset;
    }
    .thumb-title {
        transform: translateY(0);
    }
    .reproduction {
        display: flex;
        line-height: 56px;
    }
    .reproduction.reproduction {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        float: none;
    }
    .intro-container {
        flex-direction: column;
    }
}
/* @media (device-radius: 50%) { // Round display https://drafts.csswg.org/css-round-display/
    shape-inside: display;
    position: polar; // center/center
    // polar-angle: 225deg;
    // polar-distance: 100%;
    border-boundary: display;
} */
@media (prefers-reduced-motion) {
    * {
        animation: none;
        transition: none;
    }
}
@media print {
    @page {
        margin: .5cm;
    }
    .hide-onprint,
    .reproduction:before,
    .reproduction:after {
        display: none;
    }
    html,
    blockquote,
    code,
    pre,
    .thumb.thumb,
    .box.box {
        background-color: unset;
    }
    html,
    a,
    cite,
    .pubdate {
        color: unset;
    }
    p,
    h2 {
        orphans: 3;
        widows: 3;
    }
    h2 {
        page-break-after: avoid;
    }
    a {
        text-decoration: underline;
    }
    img {
        page-break-inside: avoid;
    }
    input,
    select,
    textarea {
        box-shadow: none;
    }
    .container {
        padding-top: 0;
        padding-bottom: 0;
    }
    .thumb .box {
        /* Force to print background-image */
        -webkit-print-color-adjust: exact; /* Chrome and Webkit legacy */
                      color-adjust: exact;
    }
}

@font-face {
    /* charter-webfont v4.1.0 https://www.jsdelivr.com/package/npm/charter-webfont
       MIT License */
    font-family: Charter;
    font-style: normal;
    font-display: swap;
    /* descent-override fixes Android Chrome flexbox text vertical alignment in center */
    descent-override: 34%;
    src: url(charter.woff2) format("woff2");
}