/* The mektxt.com website, over the game. Colours and sizes are Figma's (file "mektxt.com",
   page "web"); the colour names are its variables'. */

@font-face { font-family: "MEKZANTINE Mono"; src: url("../assets/fonts/MEKZANTINE-Mono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MEKZANTINE"; src: url("../assets/fonts/MEKZANTINE-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "MEK Sans"; src: url("../assets/fonts/MEKSans-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --dark1: #071324;      /* the background */
  --blue2: #3f3f74;      /* the header over the game */
  --c400: #363331;       /* lines */
  --c700: #736860;
  --c800: #9a8c81;
  --c1000: #c7bbb2;      /* text */
  --mono: "MEKZANTINE Mono", monospace;
  --serif: "MEKZANTINE", serif;
  --sans: "MEK Sans", monospace;
  /* type: MEKZANTINE (Mono and Regular) big, MEK Sans body and small; a size up on Figma's */
  --big: 24px;
  --body: 16px;
  --small: 13px;
  --header-h: 56px;
}

html, body { margin: 0; height: 100%; background: var(--dark1); overflow: hidden; }
/* type drawn as Figma draws it: macOS browsers otherwise thicken it (subpixel-style smoothing) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* The game's box: the whole of what's visible (dvh), not what's behind a phone's or tablet's
   browser bars (vh). Behind the website it fades (in steps, main.js) and takes no input. */
#game { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; }
body[data-mode="web"] #game { pointer-events: none; }

/* The website: shown through a dither while it comes and goes (main.js) */
#web { position: fixed; inset: 0; padding-top: var(--header-h); box-sizing: border-box; overflow: auto; scrollbar-width: none; color: var(--c1000); font: var(--body)/1.16 var(--sans); }
/* it scrolls (narrow windows, two pages under each other in the dither) without a bar, so its width never jumps */
#web::-webkit-scrollbar { display: none; }
body[data-mode="game"] #web { visibility: hidden; }
#web > section { display: none; min-height: 100%; position: relative; z-index: 1; }
/* the page being left, kept under the one dithered in over it (main.js) */
#web > section.leaving { display: block; position: absolute; inset: var(--header-h) 0 0; z-index: 0; overflow: hidden; }
body[data-page="home"] #web > [data-page="home"],
body[data-page="works"] #web > [data-page="works"],
body[data-page="about"] #web > [data-page="about"],
body[data-page="art-market"] #web > [data-page="art-market"] { display: block; }
/* a page that couldn't be built */
.soon { margin: 0; padding: 30vh 16px 0; text-align: center; font: var(--big)/1 var(--mono); color: var(--c800); }

/* Header: big from 600px across (like the game's own switch to its phone layout), small under.
   There are two, one over the other: the game variant (#header, which takes the clicks) and,
   laid over it, the web variant (a copy, site.js), shown through the same dither as the
   website, so every pixel is one variant's colour or the other's, never a blend. */
.header {
  position: fixed; left: 0; top: 0; right: 0; z-index: 3; height: var(--header-h); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  border-bottom: 1px solid transparent; color: var(--blue2); user-select: none;
}
.header .left, .header .right { display: flex; align-items: center; }
.header .left { gap: 12px; }
.header .right { gap: 8px; }
.header a { display: flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; font: var(--big)/1 var(--mono); text-box: trim-both cap alphabetic; }
.header .logo { gap: 12px; }
.header kbd, .header .wide { display: none; }
.header .wide { align-items: center; gap: 4px; }
.header kbd {
  box-sizing: border-box; width: 16px; height: 16px; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 2px; font: var(--small)/1.16 var(--sans);
}
.header button { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: var(--body)/1.16 var(--sans); }
.icon { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.icon.mek { --mask: url("../assets/web/mek-logo.svg"); }
.icon.speaker { --mask: url("../assets/web/speaker-high.svg"); }
body.muted .icon.speaker { --mask: url("../assets/web/speaker-x.svg"); }
/* The ESC switch is a slider: its knob rests at the game's end (left) or the website's, and
   slides between (slideKnob() in site.js), in both variants together */
.slider { position: relative; display: block; width: 30px; height: 17.5px; background: url("../assets/web/slider-track-game.svg") center / contain no-repeat; }
.knob { position: absolute; inset: 0; background: url("../assets/web/slider-knob-game.svg") center / contain no-repeat; }
body[data-switch="web"] .knob { transform: translateX(12.5px); }
.header a { white-space: nowrap; }
@media (max-width: 599px) { .header .left { gap: 8px; } }
@media (max-width: 374px) { .header a { font-size: 20px; } }   /* narrower than an iPhone: or it won't fit */
@media (min-width: 600px) {
  .header .left, .header .right { gap: 16px; }
  .header kbd, .header .wide { display: flex; }
}

/* ...and its web variant, with a line under it: the page you're on lit, the others dim */
.header.web { z-index: 4; pointer-events: none; color: var(--c1000); border-bottom-color: var(--c400); background: var(--dark1); }
body[data-mode="game"] .header.web { visibility: hidden; }
.header.web kbd { border-color: var(--c400); color: var(--c700); }
.header.web button { color: var(--c800); }
.header.web .slider { background-image: url("../assets/web/slider-track-web.svg"); }
.header.web .knob { background-image: url("../assets/web/slider-knob-web.svg"); }
.header.web a[data-to] { position: relative; color: var(--c700); }
.header.web .lit { position: absolute; inset: 0; display: flex; align-items: center; gap: inherit; color: var(--c1000); visibility: hidden; }
body[data-page="home"] .header.web a[data-to="home"],
body[data-page="works"] .header.web a[data-to="works"],
body[data-page="about"] .header.web a[data-to="about"],
body[data-page="art-market"] .header.web a[data-to="art-market"] { color: var(--c1000); }

/* ---- Pages ---- */

.corner { position: absolute; left: -1px; top: -1px; width: 7px; height: 7px; background: url("../assets/web/corner.svg") no-repeat; pointer-events: none; }
.meta { font: var(--small)/1.16 var(--sans); color: var(--c700); text-box: trim-both cap alphabetic; }
img.pixel { image-rendering: pixelated; }
/* links take their colour from where they are, unless something says otherwise (the weakest rule there is) */
:where(#web) a { color: inherit; text-decoration: none; }

/* Home (Figma "home-web", 178:24411): the strip along the top, the featured works under it,
   filling the rest of the screen; the game's card has no background, the game shows in it */
.home { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); }
.strip { display: flex; min-height: 89px; flex: none; border-bottom: 1px solid var(--c400); box-sizing: border-box; background: rgb(7 19 36 / 0.8); }
.strip .intro { width: 290px; flex: none; box-sizing: border-box; margin: 0; padding: 16px; display: flex; align-items: center; border-right: 1px solid var(--c400); color: var(--c800); }
.recent-head { flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 12px; border-right: 1px solid var(--c400); color: var(--c700); white-space: nowrap; }
.recent-head .arrows { display: flex; justify-content: space-between; gap: 8px; }
.arrow { width: 16px; height: 16px; padding: 0; border: 0; cursor: pointer; background: var(--c800); -webkit-mask: url("../assets/web/arrow-left.svg") center / contain no-repeat; mask: url("../assets/web/arrow-left.svg") center / contain no-repeat; }
.arrow.right { -webkit-mask-image: url("../assets/web/arrow-right.svg"); mask-image: url("../assets/web/arrow-right.svg"); }
.arrow:hover { background: var(--c1000); }
.recent { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; }
.recent::-webkit-scrollbar { display: none; }
.recent-card { position: relative; flex: none; width: 190px; gap: 16px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 12px; border-right: 1px solid var(--c400); }
.recent-card .title { color: var(--c800); }
.recent-card:hover .title, a.featured-card:hover .title, .featured-card a.caption:hover .title { color: var(--c1000); }
.featured { flex: 1; display: flex; gap: 16px; padding: 16px; min-height: 0; }
.featured-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--c400); background: rgb(7 19 36 / 0.8); }
.featured-card.game { order: 2; background: none; }
.featured-card:not(.game) ~ .featured-card:not(.game) { order: 3; }
.featured-card .caption { min-height: 94px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px 12px 16px; }   /* 94px tall (Figma 178:34325), a title of one line or two */
.featured-card .caption .title { font: var(--big)/1.05 var(--serif); color: var(--c1000); text-box: trim-both cap alphabetic; }
.featured-card .frame { position: relative; flex: 1; min-height: 0; border-radius: 4px; overflow: hidden; }
/* its pictures going by, edge to edge (home.js roll): a run of them, then the same again; a hand
   to grab them with, not a link's pointer */
.featured-card .ticker { position: absolute; inset: 0; display: flex; will-change: transform; }
.featured-card .run { flex: none; display: flex; height: 100%; }
.featured-card .run img { flex: none; height: 100%; width: auto; }
.featured-card:not(.game) .frame { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.featured-card .frame.dragging { cursor: grabbing; }
/* narrower: only the game's card, as Figma has it on a tablet or phone */
@media (max-width: 1023px) {
  .featured-card:not(.game) { display: none; }
}
@media (max-width: 599px) {
  .strip .intro { display: none; }
  .featured { padding: 12px; gap: 12px; }
}

/* About (Figma "about-web" a and b, 179:39898 and 200:64768): three columns, each scrolling on
   its own, the middle one empty for the game to show through, or holding the panel */
.about { display: grid; grid-template-columns: min(33.333%, 450px) minmax(0, 1fr) min(33.333%, 450px); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
.about .col { position: relative; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }
.about .col::-webkit-scrollbar { display: none; }
.about .left, .about .right, .about .panel { background: rgb(7 19 36 / 0.8); }
.about .left { border-right: 1px solid var(--c400); padding-bottom: 16px; }
.about .right { border-left: 1px solid var(--c400); }
.about p { margin: 0; max-width: 440px; }
/* the left column fits the screen without scrolling: the portrait takes what the words leave,
   up to 400px tall (Figma 744x1133 has it at 141), and goes (no-portrait) rather than be
   shorter than 85px; past that the intro's type steps down to fit (fitAbout() in about.js) */
.about .left > :not(.portrait):not(.corner) { flex: none; }
.about .portrait { display: flex; justify-content: center; padding: 0 16px; flex: 1 1 400px; max-height: 400px; min-height: 0; }
.about .left.no-portrait .portrait { display: none; }
.about .crop { position: relative; overflow: hidden; aspect-ratio: 207 / 241; height: 100%; }
.about .crop img { position: absolute; left: -25.14%; top: -0.9%; width: 149.36%; height: 149.67%; }
.about .intro { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-bottom: 1px solid var(--c400); font: var(--intro, var(--big))/1.2 var(--serif); }
.about .text { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-bottom: 1px solid var(--c400); }
.about .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; border-bottom: 1px solid var(--c400); }
.link, .tab, .arrow, .recent-card .title, .featured-card .title, .panel-bar .hide, .panel-bar .arrow, .entry a {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .link, .tab, .arrow, .recent-card .title, .featured-card .title, .panel-bar .hide, .panel-bar .arrow, .entry a { transition: none; }
}
.link, .tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--c400); border-radius: 4px; color: var(--c800); white-space: nowrap; }
.link .n, .tab .n { color: var(--c700); }
a.link:hover, .tab:hover, .link.on { border-color: var(--c800); color: var(--c1000); }
.link.on .n { color: var(--c800); }
/* the right column's picture: as wide as the column, at the bottom of what's left of it, its
   top cut off if there isn't room (Figma "img", items-end) */
.about .right > :not(.picture):not(.corner) { flex: none; }
.about .picture { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; }
.about .picture img { display: block; flex: none; width: 100%; height: auto; }
.about .panel { display: none; flex: 1; max-width: 450px; box-sizing: border-box; border-right: 1px solid var(--c400); padding-bottom: 32px; }
.about.panel-open .panel { display: block; }
.panel-bar { padding: 8px 16px; border-bottom: 1px solid var(--c400); }
.panel-bar .hide { display: flex; align-items: center; gap: 8px; color: var(--c700); }
.panel-bar .arrow { display: block; background: var(--c700); }
.panel-bar .hide:hover { color: var(--c1000); }
.panel-bar .hide:hover .arrow { background: var(--c1000); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-bottom: 1px solid var(--c400); }
.tab { flex: 1; }
.tab.on { border-color: var(--c800); color: var(--c1000); }
.tab.on .n { color: var(--c800); }
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding: 16px 16px 32px; }
.entry { display: flex; flex-direction: column; gap: 8px; }
.entry a { text-decoration: underline; text-underline-offset: 2px; }
.entry a:hover { color: var(--c800); }
/* a phone: one column, the left's then the right's; the panel over it all */
@media (max-width: 599px) {
  .about { display: block; height: auto; }
  .about .col { overflow: visible; }
  .about .portrait { flex: none; max-height: none; }
  .about .crop { height: min(320px, 40vh); }
  .about .left { border-right: 0; }
  .about .right { border-left: 0; border-top: 1px solid var(--c400); }
  .about .mid { display: none; }
  .about.panel-open .mid { display: block; position: fixed; z-index: 2; left: 0; right: 0; top: var(--header-h); bottom: 0; overflow-y: auto; }
  .about.panel-open .panel { background: rgb(7 19 36 / 0.95); border-right: 0; min-height: 100%; max-width: none; }
}

/* The sidebar of works and of the art market (Figma 195:80751, 197:25250), a quarter wider than
   Figma's 200px. Hidden, it's a strip with its icon: its width eases there while what's in it
   slides out to the left, like about's panel, at its width all the way so nothing rewraps. */
:root { --side-w: 250px; --side-strip: 33px; --slide: 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.side { position: relative; flex: none; width: var(--side-w); }
.sidebar { position: absolute; inset: 0 auto 0 0; width: var(--side-w); overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--c400); background: rgb(7 19 36 / 0.8); box-sizing: border-box; }
.sidebar .bar, .sidebar-body { width: var(--side-w); box-sizing: border-box; flex: none; }
.sidebar .bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--c400); background: none; color: var(--c700); font: var(--body)/1.16 var(--sans); cursor: pointer; text-align: left; white-space: nowrap; }
.sidebar .bar .icon { flex: none; }
.sidebar .bar kbd { display: flex; box-sizing: border-box; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid var(--c400); border-radius: 2px; font: var(--small)/1.16 var(--sans); }
.sidebar .bar:hover { color: var(--c1000); }
.icon.list { --mask: url("../assets/web/list.svg"); }
/* the categories stay put and the list under them scrolls (the categories too, if they can't fit) */
.sidebar-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sidebar .group:first-child { flex: 0 1 auto; min-height: 0; }
.sidebar .group:last-child { flex: 1 1 0; min-height: 160px; }
.sidebar nav { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.sidebar nav::-webkit-scrollbar { display: none; }
.sidebar .group { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 16px; border-bottom: 1px solid var(--c400); }
.sidebar .head { margin: 0; color: var(--c700); }
.sidebar nav { position: relative; display: flex; flex-direction: column; }
.sidebar nav a { display: flex; align-items: center; padding: 6px 0; color: var(--c800); transition: color 160ms ease; }
.sidebar .items a { align-items: flex-start; }
.sidebar nav a.on { color: var(--c1000); }
/* a row's ">": none idle, dim on hover, and on the picked row; 4px off its words when shown */
.sidebar .mark { flex: none; overflow: hidden; max-width: 0; opacity: 0; color: var(--c700);
  transition: max-width 160ms ease, margin 160ms ease, opacity 160ms ease; }
.sidebar nav a:hover .mark { max-width: 1em; opacity: 1; margin-right: 4px; }
.sidebar nav a.on .mark { max-width: 1em; opacity: 1; margin-right: 4px; }
.sidebar .items a.on .mark { color: var(--c1000); }
.sidebar .rule { flex: 1; height: 1px; margin: 0 6px; background: var(--c400); }
.sidebar .count { color: var(--c700); }
.sidebar .categories a.on .count { color: var(--c1000); }
/* ...hidden */
.sidebar-hidden .side, .sidebar-hidden .sidebar { width: var(--side-strip); }
.sidebar-hidden .sidebar-body { transform: translateX(calc(var(--side-strip) - var(--side-w))); visibility: hidden; }
.sidebar-hidden .sidebar .label, .sidebar-hidden .sidebar kbd { opacity: 0; }
.sidebar-ready .side, .sidebar-ready .sidebar { transition: width var(--slide); }
.sidebar-ready .sidebar-body { transition: transform var(--slide), visibility 0s; }
.sidebar-ready.sidebar-hidden .sidebar-body { transition: transform var(--slide), visibility 0s var(--slide); }
.sidebar-ready .sidebar .label, .sidebar-ready .sidebar kbd { transition: opacity var(--slide); }
.sidebar-hidden .sidebar .bar { padding-left: 8px; }
.sidebar-ready .sidebar .bar { transition: padding var(--slide), color 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-ready .side, .sidebar-ready .sidebar, .sidebar-ready .sidebar-body, .sidebar-ready .sidebar .label,
  .sidebar-ready .sidebar kbd, .sidebar-ready .sidebar .bar, .sidebar .mark { transition: none; }
}

/* Works (Figma "works-web", 184:74635): the sidebar, a work's words, its pictures; each scrolls on its own */
.works { display: flex; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
.work { flex: 1; min-width: 0; display: flex; }
.work-text { position: relative; flex: none; width: 300px; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--c400); background: rgb(7 19 36 / 0.8); }
.work-text::-webkit-scrollbar, .work-images::-webkit-scrollbar { display: none; }
.title-block { display: flex; flex-direction: column; gap: 56px; padding: 16px; background: #0f1c2f; border-bottom: 1px solid var(--c400); }
.title-block h1 { margin: 0; font: var(--big)/1.05 var(--serif); color: var(--c1000); font-weight: normal; }
.title-block .subtitle { margin: 0; color: var(--c800); }
.work .desc { padding: 16px; border-bottom: 1px solid var(--c400); }
.work .desc p { margin: 0 0 1.16em; }
.work .desc p:last-child { margin: 0; }
.work .desc a, .details a { text-decoration: underline; text-underline-offset: 2px; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; padding: 16px; border-bottom: 1px solid var(--c400); }
.details > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.details .value { color: var(--c800); overflow-wrap: anywhere; }
.details a:hover { color: var(--c1000); }
.tags { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; gap: 8px; padding: 16px; }
.work-images { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: none; }
.work-images img, .work-images video { display: block; width: 100%; height: auto; }
.gallery { columns: 2; column-gap: 0; }
.gallery img, .gallery video { break-inside: avoid; }
/* a tablet: the sidebar and one column, the words above the pictures */
@media (max-width: 1023px) {
  .work { display: block; overflow-y: auto; }
  .work-text { width: auto; border-right: 0; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-block { justify-content: space-between; }
  .work .desc { border-left: 1px solid var(--c400); }
  .details { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tags { grid-column: 1 / -1; border-bottom: 1px solid var(--c400); }
  .work-images { overflow: visible; }
}
/* a phone: the sidebar hidden to a strip, opening over the work; the words one under another */
@media (max-width: 599px) {
  .side, .sidebar-hidden .side { width: var(--side-strip); }
  .sidebar { z-index: 2; }
  .works:not(.sidebar-hidden) .sidebar { background: rgb(7 19 36 / 0.96); }
  .work-text { display: flex; }
  .work .desc { border-left: 0; }
  .details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Art market (Figma "artmarket-web", 197:21136): the sidebar, and the pieces as cards (Figma
   "card-art", 270:59284), 4 across on a big screen, 3, 2 on a tablet, 1 on a phone; they scroll */
.market { display: flex; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
/* solid: the game's not seen through the art market */
.market, .market .sidebar, .market .art-bar { background: var(--dark1); }
.listing { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* the bar over the cards (Figma 239:54244): where you are, and the two menus */
.art-bar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 16px; border-bottom: 1px solid var(--c400); background: rgb(7 19 36 / 0.8); line-height: 1.16; }
.art-bar .crumb { color: var(--c700); white-space: nowrap; }
.art-bar .filters { display: flex; gap: 24px; margin-left: auto; }
.filter { position: relative; }
.filter .pick { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--c800); font: inherit; cursor: pointer; white-space: nowrap; transition: color 160ms ease; }
.filter .pick:hover, .filter.open .pick { color: var(--c1000); }
.icon.caret { --mask: url("../assets/web/caret-down.svg"); width: 14px; height: 14px; transition: transform 160ms ease; }
.filter.open .caret { transform: rotate(180deg); }
/* a row's ">" (as the sidebar's: dim on hover, lit on the one picked) is laid over the room kept
   for it at the menu's right, the words sliding over into it: the menu's as wide either way */
.filter .menu { --shift: calc(0.54em + 4px); display: none; position: absolute; right: 0; top: calc(100% + 9px); flex-direction: column; min-width: 100%; box-sizing: border-box; padding: 6px calc(12px + var(--shift)) 6px 12px; border: 1px solid var(--c400); background: var(--dark1); }
.filter.open .menu { display: flex; }
.filter .menu button { position: relative; display: flex; align-items: center; padding: 6px 0; border: 0; background: none; color: var(--c800); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; transition: color 160ms ease; }
.filter .menu button.on { color: var(--c1000); }
.filter .menu .mark { position: absolute; left: 0; opacity: 0; color: var(--c700); transition: opacity 160ms ease; }
.filter .menu .mark + span { transition: transform 160ms ease; }
.filter .menu button:hover .mark, .filter .menu button.on .mark { opacity: 1; }
.filter .menu button:hover .mark + span, .filter .menu button.on .mark + span { transform: translateX(var(--shift)); }
.filter .menu button.on .mark { color: var(--c1000); }
.art .none { grid-column: 1 / -1; margin: 0; padding: 16px 4px; color: var(--c700); }
.art { flex: 1; min-width: 0; overflow-y: auto; scrollbar-width: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); align-content: start; gap: 24px 12px; padding: 12px; }
.art::-webkit-scrollbar { display: none; }
@media (min-width: 1600px) { .art { --cols: 4; } }
@media (max-width: 1023px) { .art { --cols: 2; } }
@media (max-width: 599px) { .art { --cols: 1; } }
.card-art { display: flex; flex-direction: column; border: 1px solid var(--c400); background: var(--dark1); color: var(--c700);
  /* a card off screen isn't laid out or drawn (a few hundred of them made coming to this page, and
     leaving it, slow); it holds the size it last had, and about a square picture's till it's had one */
  content-visibility: auto; contain-intrinsic-size: auto 420px; }
.card-art .frame { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: #0f1c2f; border-bottom: 1px solid var(--c400); }
.card-art .frame img { position: relative; display: block; width: 100%; height: auto; }
/* till its picture's in (or with none), the MEK logo (Figma 197:21279's) in the middle */
.card-art .frame { position: relative; }
.card-art .frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; background: var(--c700);
  -webkit-mask: url("../assets/web/mek-logo.svg") center / contain no-repeat; mask: url("../assets/web/mek-logo.svg") center / contain no-repeat; }
.card-art .frame.loaded::before { display: none; }
.card-art .caption { position: relative; display: flex; flex-direction: column; }
.card-art .caption > span { padding: 12px; }
.card-art .caption > span + span { border-top: 1px solid var(--c400); }
.card-art .corner { left: -1px; top: 0; }
.card-art .corner.tr { left: auto; right: -1px; transform: rotate(90deg); }
.card-art .corner.bl { top: auto; bottom: -1px; transform: rotate(-90deg); }
.card-art .corner.br { top: auto; left: auto; right: -1px; bottom: -1px; transform: rotate(180deg); }
.card-art .title { font: var(--body)/1.16 var(--sans); color: var(--c1000); }   /* MEK Sans, as Figma has it now */
/* one line (Figma 270:59284): XTZ 45.44 / USD 14.2, and the editions at the right (under it, at
   the right, on a card too narrow for both) */
.card-art .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; color: var(--c800); white-space: nowrap; }
.card-art .detail { display: flex; align-items: baseline; gap: 6px; }
.card-art .slash { color: var(--c400); }
.card-art .editions { flex: 1; text-align: right; color: var(--c700); }
.card-art .label { font-size: var(--small); color: var(--c700); }