/* The refresh's system (Figma "mektxt-system", page "system": primitive 91:15952, web 98:30699) and
   the pages built from it so far, home (108:57855) and works (108:57856). Its colours are the variables of "web-colour",
   one set a theme, on <html data-theme> (web/home.js); the other pages keep site.css's till they're
   redone. */

@font-face { font-family: "Dosage Humanist"; src: url("../assets/fonts/Dosage-Humanist.woff2") format("woff2"); font-display: swap; }

:root {
  /* The themes are the design system's now (design/css/tokens.css, set by data-theme on <html>: Miner unless one's
     picked, index.html), still from Figma's web-colour variables. These are the site's old names for its steps */
  --ui-100: var(--100); --ui-400: var(--400); --ui-500: var(--500); --ui-500-accent: var(--500-accent); --ui-700: var(--700);
  --ui-800: var(--800); --ui-900: var(--900); --ui-1000: var(--1000); --ui-accent: var(--accent);
  --ui-100-30: color-mix(in srgb, var(--100) 30%, transparent); --ui-100-50: color-mix(in srgb, var(--100) 50%, transparent);
  --ui-100-60: color-mix(in srgb, var(--100) 60%, transparent); --ui-100-80: var(--ground-80);
}

/* The website's background is the theme's darkest, not dark1 (dos-age.com, the game alone, keeps
   dark1); --ui-raise, a little lighter, is what's set apart */
:root { --ui-raise: color-mix(in srgb, var(--ui-400) 16%, var(--ui-100)); }
html:has(> body:not([data-game-only])) { --dark1: var(--ui-100); }

/* Every box is the design system's px-box (design/css/components.css): the stepped corner, 1px line, 2px lip. On
   the site a box's fill is the ground at 80%, as in Figma */
.px-box { --fill: var(--ground-80); box-sizing: border-box; }

/* A panel: the box's insides are 3px by 8px, inside the curves and the 1px sides */
.panel-box { padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* button-default, button-logo and the text boxes that are links (96:16801, 96:19832): the system's .btn (hover
   dissolves to edge 600 and ink 1000, pushed sinks into the lip, on is edge 800). Its key letter is the quiet accent */
.btn { display: flex; gap: 2px; margin: 0; font: 14px/18px "Dosage Humanist", monospace; }
.btn b { font-weight: normal; color: var(--500-accent); }
.btn.on b, .btn:active b { color: var(--800); }
.btn.off { --ink: var(--400); --ink-to: var(--400); --edge-to: var(--edge); cursor: default; }
.btn.off b { color: var(--400); }
.btn.off:active { padding-block: 8px 9px; --px-hole-b: 2px; }
.btn.off:active::before { inset: 0; }
.btn.off:active::after { inset: 1px 1px 2px; }

/* Everything else that reacts to hover dissolves with the system's helpers (design/css/motion.css): .dissolve on a
   box or link, .dissolve-links on what holds links from content and lists, .dissolve-ink on a box's title. Boxes go
   to edge 600; keyboard focus shows the hover look at once, and the system's dashed ring */
:is(.link-box, .pic, .mk-card) { --edge-to: var(--line-hover); }
body:not([data-game-only]) :is(a, button, [tabindex]):focus-visible { outline: var(--stroke) dashed var(--text-soft); outline-offset: 2px; }

/* headbar (91:16281): its title, subtext, the decorative line (91:16009) and what's at its end */
.bar { display: flex; align-items: center; gap: 4px; font: 14px/18px "Dosage Humanist", monospace; white-space: nowrap; color: var(--ui-500-accent); }
.bar .sub { color: var(--ui-800); }
.bar a, .bar button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: none; --ink-to: var(--accent); }
.spine { flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: 6px; }
.spine i { flex: 1 1 0; height: 1px; background: var(--ui-400); }
.spine u { flex: none; width: 8px; height: 5px; background: repeating-linear-gradient(var(--ui-400) 0 1px, transparent 1px 2px); }
.spine.v { flex-direction: column; width: 6px; height: auto; }
.spine.v i { width: 1px; height: auto; }
.spine.v u { width: 5px; height: 8px; background: repeating-linear-gradient(90deg, var(--ui-400) 0 1px, transparent 1px 2px); }
.ic { flex: none; display: block; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic.next, .ic.back { --i: url("../assets/web/caret-right.svg"); }
.ic.back { transform: scaleX(-1); }
.ic.drop { --i: url("../assets/web/caret-fill.svg"); }
.ic.mark { --i: url("../assets/web/mek-mark.svg"); width: 17px; height: 17px; margin: -1px 0; }
.ic.close { --i: url("../assets/web/close.svg"); }
.ic.filter { --i: url("../design/assets/icons/filter.svg"); }   /* (the design system's) */
.wk-pick .ic.filter { color: var(--500-accent); }   /* (in the quiet accent, as the keys in [ ]: the user's ask 2026-11-07) */

/* Home, works, about and the art market have no header or quick links of their own any more (all in their panels) */
body:is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"]) #web { padding-top: 0; }
body:is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"]) #web > .quick-links { display: none; }
body:is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"]) #web > :is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"]) { min-height: 100%; }
body:is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"])[data-mode="web"] .header { visibility: hidden; }
#web > section.leaving:is([data-page="home"], [data-page="works"], [data-page="about"], [data-page="shop"], [data-page="view"], [data-page="devlog"], [data-page="wiki"]) { top: 0; }
/* Only home and about (and a work that's the game, data-clear) show the game behind them; every other page is on
   the solid ground, 100 (the user's, 2026-11-06) */
#web > section:not([data-page="home"], [data-page="about"], [data-clear]) { background: var(--100); }

/* The nav over the game (126:101002, 126:105528, 126:108067), just where home's and about's is, so
   that it stays when they go (main.js): in the website's theme, as the game under it is (palette.js; it had
   the game's own navy and blues till the game took the website's theme, 2026-11-06). It stands in for the
   old header's game variant, which stays only for its height (game.js headerPx) and, on the pages not
   redone, the web variant's clicks */
.game-nav {
  --w: min(400px, calc((100vw - 32px) / 3));
  --w: min(400px, round(down, calc((100vw - 32px) / 3), 1px));
  position: fixed; left: 16px; top: 16px; z-index: 5; width: var(--w); pointer-events: none;
}
body[data-page="about"] .game-nav { --w: min(400px, calc((100vw - 44px) / 3)); --w: min(400px, round(down, calc((100vw - 44px) / 3), 1px)); }
body[data-switch="game"] .game-nav { pointer-events: auto; }
body[data-game-only] .game-nav { display: none; }
body:not([data-game-only]) #header > * { opacity: 0; }
body:not([data-game-only])[data-switch="game"] #header { visibility: hidden; }
.gear { top: 57px; }
/* ...and the game's settings gear under it in the theme too, as the nav's keys (it was the game's beige) */
body:not([data-game-only]) .gear { color: var(--500-accent); }
@media (max-width: 1179px) { .game-nav, body[data-page="about"] .game-nav { --w: calc((100vw - 38px) / 2); } }
@media (max-width: 599px) {
  .game-nav, body[data-page="about"] .game-nav { --w: calc(100vw - 16px); left: 8px; top: 8px; }
  .gear { left: 8px; top: 49px; }
}

/* Home and about: the game behind them as it is, nothing laid over it (it's in the website's theme,
   palette.js; Figma's frame 96:19176 had the theme's 100-30% twice over it, taken off at the user's ask,
   2026-11-06) */

.home {
  --w: min(400px, calc((100vw - 32px) / 3));
  --w: min(400px, round(down, calc((100vw - 32px) / 3), 1px));
  position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; padding: 16px;
  display: grid; grid-template-columns: var(--w) minmax(0, 1fr) var(--w);
  color: var(--ui-900); font: 14px/18px "Dosage Humanist", monospace;
}
.home .col { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.home .top { display: flex; flex-direction: column; gap: 6px; }

/* a narrow tablet hasn't the room for the nav's keys, a phone's logo and words instead (the keys
   still work); Figma's 381 at 800 wide has them all (Claude's reading, no Figma) */
@media (min-width: 600px) and (max-width: 799px) {
  .nav:not(.tight) b { display: none; }
  .nav:not(.tight) .logo { flex: none; width: 33px; justify-content: center; padding-left: 0; padding-right: 0; }
}

/* nav (98:31127): two sides on a computer and a tablet, the arrow going between them */
.nav { display: flex; gap: 6px; }
.nav .side { flex: 1; display: flex; gap: 6px; min-width: 0; }
.nav.b .side.a, .nav:not(.b) .side.b { display: none; }
.nav .grow { flex: 1; justify-content: center; }
.nav .grow .ic { display: none; }   /* (a phone's, in place of the arrow) */
:is(.nav, .theme-row) .more { flex: none; width: 24px; justify-content: center; color: var(--ui-500-accent); padding: 8px 0 9px; }
.nav .logo { align-self: center; height: 33px; gap: 4px; padding: 7px 8px 8px; }
@media (min-width: 600px) {
  .nav.tight .grow { display: none; }
  .nav.tight .side.a .btn:not(.logo, .more) { flex: 1; justify-content: center; padding-left: 7px; padding-right: 7px; }   /* (Figma's 79 each, in the sidebar's 256) */
  .nav.tight .side.b .btn:not(.more) { flex: 1; justify-content: center; }
  .nav.tight .side.b .off { display: none; }   /* (no room beside the list; its page isn't there yet) */
  :is(.mk, .tx) .nav.tight .side.b .btn { flex: none; display: flex; }   /* (the side b these open on: 129:84924, 136:120232) */
}

.about-row { display: flex; gap: 4px; }   /* (173:96256) */
.about-row .bio { flex: 1; min-width: 0; margin: 0; padding: 8px 9px 9px; }
.socials { flex: none; display: flex; flex-direction: column; padding: 8px 9px 9px; color: var(--ui-500-accent); }
.socials a { text-decoration: none; --ink-to: var(--accent); }
.socials .off { color: var(--ui-400); }

.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

/* card-image, featured (97:23593): a work at random, its pictures going by (home.js roll) */
.works-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.work-card { flex: 1 1 0; min-height: 180px; gap: 12px; }
.work-card.second { display: none; }
.work-stage { position: relative; flex: 1; min-height: 0; }
.work-body { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; }
.work-card .work-title { flex: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 20px/1 "MEKZANTINE", serif; --ink: var(--900); --ink-to: var(--1000); text-box: trim-both cap alphabetic; text-decoration: none; }
.frame-roll { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ui-100-80); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.frame-roll.dragging { cursor: grabbing; }
/* In a theme wipe (mek.js), what the circle hasn't reached yet is a still of the old page, so a reel in it
   would stop. A home card's reel is lifted out of that still into its own layer, live, in the new theme at once */
html.mek-theme-wipe .work-card .frame-roll { view-transition-name: var(--roll-name, none); view-transition-class: roll; }
html.mek-theme-wipe::view-transition-group(*.roll), html.mek-theme-wipe::view-transition-new(*.roll) { animation: none; }
html.mek-theme-wipe::view-transition-old(*.roll) { display: none; }
.frame-roll .ticker { position: absolute; inset: 0; display: flex; will-change: transform; }
.frame-roll .run { flex: none; display: flex; height: 100%; }
.frame-roll .run img, .frame-roll .run video { flex: none; display: block; height: 100%; width: auto; }

/* card-image, multiple (97:29912): the four boxes of pictures */
.game-card { flex: 1 1 0; min-height: 230px; gap: 12px; }
.pics { flex: 1; min-height: 0; display: grid; grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 6px; }
.pic { display: flex; min-width: 0; min-height: 0; padding: 7px 8px 8px; text-decoration: none; --fill: transparent; --fill-to: transparent; }
.pic em { --ink: var(--900); --ink-to: var(--1000); }
.pic span { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; border-radius: 2px; text-align: center; font: 16px/1.2 "MEKZANTINE", serif; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: calc(0.8 + 0.2 * var(--dz, 0)); }
.pic span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ui-100-50), var(--ui-100-80) 61.538%); }
.pic em { position: relative; z-index: 1; font-style: normal; }

/* two sides, as the nav's; DOSAGE takes what's left of the first, from Figma's 65 (its word and no
   side padding, so that the arrow stays on the row at Figma's 363) */
.theme-row { display: flex; }
.theme-row .side { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.theme-row.b .side.a, .theme-row:not(.b) .side.b { display: none; }
.theme-row .btn { flex: none; justify-content: center; }
.theme-row .btn[data-theme-id="dos-age"] { flex: 1 0 65px; padding-left: 0; padding-right: 0; }
.theme-row .btn .phone { display: none; }

/* recent-works (98:38630): as many as Figma has at the height, 2 to 16 */
.recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.link-box { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 9px 9px; color: var(--900); text-decoration: none; }
.link-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-box .t { --ink: var(--900); --ink-to: var(--1000); }
.link-box .d { color: var(--ui-700); }
.recent-grid .link-box:nth-child(n + 9) { display: none; }

/* text-box, full (97:23766), over the game in the middle */
/* It stays off the character and the arrow over them, who are always in the middle of the window
   across: beside them, to its left, or in a landscape window on a computer, where they're in the
   middle down it too, below them (a row grows with the window's height) */
.mid { --clear: 32px; position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; min-width: 0; padding-right: calc(50% + var(--clear)); }
.dos-box { flex: 0 1 210px; min-width: 0; gap: 12px; }
@media (min-width: 1180px) and (min-aspect-ratio: 1/1) {
  .mid { align-self: start; align-items: flex-start; justify-content: center; padding-top: calc(57vh - 16px); padding-right: 0; }
}
.dos-box h2 { margin: 0; font: 20px/normal "MEKZANTINE", serif; font-weight: normal; color: var(--ui-accent); }
.dos-box p { margin: 0; }
.dos-box .cta { display: flex; flex-wrap: wrap; gap: 6px; }
.dos-box .cta .btn { flex: 1; justify-content: center; }

/* About (119:101001): three columns of the same width, the middle one's box against the right, or
   nothing, the game showing through; the columns' lists scroll on their own */
.ab {
  --w: min(400px, calc((100vw - 44px) / 3));
  --w: min(400px, round(down, calc((100vw - 44px) / 3), 1px));
  position: relative; box-sizing: border-box; height: max(100vh, 780px); height: max(100dvh, 780px); padding: 16px;
  display: grid; grid-template-columns: var(--w) minmax(0, 1fr) var(--w);
  color: var(--ui-900); font: 14px/18px "Dosage Humanist", monospace;
}
.ab-col { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.ab p { margin: 0; }
.ab-intro { flex: 1; min-height: 0; }
.ab-intro p { font: 16px/22px "MEKZANTINE", serif; }
.ab-logo { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ab-logo .ic.mark { width: 51px; height: 51px; margin: 0; color: var(--ui-700); }
.ab-text { gap: 6px; }
.ab-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ab-btns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the portrait (115:84097), at the bottom of what's left of the column, drawn in the theme's own
   colour on its darkest (the file's a grey for it to go through: Figma's blends of the drawing) */
.ab-pic { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 7px 8px 8px; }
.ab-pic { --fill: var(--100); }
.ab-frame { flex: 0 1 400px; min-height: 0; overflow: hidden; }
.ab-pic .crop { position: relative; overflow: hidden; aspect-ratio: 207 / 241; background: var(--ui-900); mix-blend-mode: lighten; isolation: isolate; }
.ab-pic .crop img { position: absolute; left: -25.14%; top: -0.9%; width: 149.36%; height: 149.67%; max-width: none; mix-blend-mode: multiply; }

/* media-publication-box */
.ab-mid { position: relative; display: flex; justify-content: flex-end; min-width: 0; min-height: 0; padding: 0 6px; overflow: hidden; }
.ab-media { display: none; flex: none; width: var(--w); }
.panel-open .ab-media { display: flex; }
.ab-media .bar .close { display: flex; align-items: center; color: var(--ui-700); }
.ab-media .bar .close { --ink-to: var(--accent); }
.ab-list { flex: 1 1 0; height: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; align-content: start; padding: 8px; overflow-y: auto; scrollbar-width: none; }
.ab-list::-webkit-scrollbar { display: none; }
.ab-entry { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ui-700); }
.ab-entry a { --ink: var(--900); --ink-to: var(--1000); text-decoration: none; }

/* a tablet (119:94112): the boxes in two columns, their rows crossing so that each column keeps its
   own heights, the media box taking what's left of the right, always there (nothing here would
   bring it back, so no Close) */
@media (max-width: 1179px) {
  .ab { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto auto auto; gap: 6px; height: auto; min-height: 100vh; min-height: 100dvh; }
  .ab-col, .ab-mid { display: contents; }
  .ab-logo { flex: 1 0 117px; }
  .ab .nav { grid-area: 1 / 1; }
  .ab-intro { grid-area: 2 / 1 / 5 / 1; }
  .ab-links { grid-area: 5 / 1; }
  .ab .quick-card { grid-area: 6 / 1; }
  .ab-design { grid-area: 7 / 1; }
  .ab-pixel { grid-area: 1 / 2 / 3 / 2; }
  .ab-gallery { grid-area: 3 / 2; }
  .ab-pic, .ab-inquiry, .ab-media .bar .close { display: none; }
  .ab-media { grid-area: 4 / 2 / 8 / 2; width: auto; }
}
/* a phone (119:98056): one column, the boxes as the tablet's, left then right */
@media (max-width: 599px) {
  .ab { display: flex; flex-direction: column; padding: 8px; }
  .ab .nav { order: 0; }
  .ab-intro { flex: none; order: 1; }
  .ab-logo { flex: none; height: 120px; }
  .ab-links { order: 2; }
  .ab .quick-card { order: 3; }
  .ab-design { order: 4; }
  .ab-pixel { order: 5; }
  .ab-gallery { order: 6; }
  .ab-media { order: 7; }
  .ab-list { flex: none; height: auto; overflow: visible; }
}
/* (a narrow one hasn't the room for Figma's rows of buttons, nor a narrow tablet's half column) */
@media (max-width: 389px) {
  .ab .quick-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.ab-links, .ab-gallery) .ab-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tabs .btn { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 600px) and (max-width: 779px) {
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.ab-links, .ab-gallery) .ab-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Works (108:57856): the sidebar, a caption and the pictures, the sidebar's list, the caption's words
   and the pictures each scrolling on their own, in the whole of the window */
.wk { --side: 256px; --strip: 33px; --slide: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative; box-sizing: border-box; display: flex; gap: 6px; height: 100vh; height: 100dvh; padding: 16px;
  color: var(--ui-900); font: 14px/18px "Dosage Humanist", monospace; }
.wk-side { position: relative; flex: none; width: var(--side); }
.wk.sidebar-ready .wk-side { transition: width var(--slide); }
.wk-full { position: absolute; inset: 0 auto 0 0; width: var(--side); display: flex; flex-direction: column; gap: 6px; }
.wk-full .nav { order: 0; }
.wk-lists { display: contents; }
.wk-cat { order: 1; flex: none; gap: 6px; }
.wk-control { order: 2; flex: none; display: flex; gap: 6px; }
.wk-list { order: 3; flex: 1; min-height: 0; gap: 6px; }

/* the lists: list-short and list-long (91:16281), a row lit when it's the one picked or shown */
.wk-cats, .wk-items { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.wk-items { flex: 1; overflow-y: auto; scrollbar-width: none; }
.wk-items::-webkit-scrollbar, .wk-text::-webkit-scrollbar { display: none; }
.wk-cats a, .wk-items a { display: flex; gap: 2px; --ink: var(--800); --ink-to: var(--1000); text-decoration: none; }
.wk-cats a { align-items: center; height: 18px; gap: 0; }
.wk-items a { position: relative; flex: none; align-items: flex-start; padding-bottom: 2px; border-bottom: 1px solid var(--ui-400); }
.wk-cats .rule { flex: 1; height: 1px; min-width: 8px; margin: 0 2px; border: 0; background: var(--line); }
.wk-cats .n, .wk-items .n { flex: none; color: var(--700); }
.wk-items .t { flex: 1; min-width: 0; }
:is(.wk-cats, .wk-items) a.on { --ink: var(--1000); }
:is(.wk-cats, .wk-items) a.on .n { color: var(--ui-500-accent); }
/* a row's ">": none idle, 700 on hover, accent on the one picked, as the system's dropdown rows
   (design/css/components.css .pick-menu): it never takes room, it's drawn over the row's start while the words
   slide 9px into room kept for them, 1px a display frame (--px-frame), so nothing around it moves. In the
   short list the rule after the words gives way to them, clipped, the row the same width */
.wk-cats, .wk-items { --shift: 9px; }
:is(.wk-cats, .wk-items) a { position: relative; }
:is(.wk-cats, .wk-items) .mark { position: absolute; left: 0; top: 0; width: var(--shift); font-size: 13px; line-height: 18px;
  color: var(--700); clip-path: inset(0 100% 0 0); transition: clip-path calc(9 * var(--px-frame)) steps(9, end); }
:is(.wk-cats a > span:not(.mark, .n), .wk-items .t) { transition: translate calc(9 * var(--px-frame)) steps(9, end); }
.wk-cats .rule { clip-path: inset(0 0 0 0); transition: clip-path calc(9 * var(--px-frame)) steps(9, end); }
.wk-items .t { box-sizing: border-box; padding-right: var(--shift); }
:is(.wk-cats, .wk-items) a:is(:hover, :focus-visible, .on) .mark { clip-path: inset(0); }
:is(.wk-cats a:is(:hover, :focus-visible, .on) > span:not(.mark, .n), .wk-items a:is(:hover, :focus-visible, .on) .t) { translate: var(--shift) 0; }
.wk-cats a:is(:hover, :focus-visible, .on) .rule { clip-path: inset(0 0 0 var(--shift)); }
:is(.wk-cats, .wk-items) a.on .mark { color: var(--accent); }

/* what the sidebar has over its lists, the devlog's word on the game */
.wk-intro { order: 1; flex: none; gap: 6px; }
.wk-intro p { margin: 0; color: var(--ui-800); }
.wk-intro-btns { display: flex; flex-direction: column; gap: 6px; }

/* hide sidebar, and the order: dropdown-nobutton (102:30701) */
.wk-toggle { flex: none; gap: 4px; }   /* ([S] and an arrow pointing left; the strip's pointing right: the user's ask, 2026-11-07) */
.wk-toggle .ic, .wk-pick .ic { color: var(--500-accent); }
.ic.arrow-l { --i: url("../design/assets/icons/arrow-left.svg"); }
.ic.arrow-r { --i: url("../design/assets/icons/arrow-right.svg"); }
/* the search, between hide and sort: a px-box (the stepped corners) with a magnifier in 700 at its left, 6px in
   and 4px from the words. Its place in the row (.wk-search) keeps its size; the box lies over it (system.js
   wireSearch says where) and, while it's typed in, slides out over hide and sort to the whole row and back as
   it's left, short and smooth (a deviation from the system's stepped motion, listed in CLAUDE.md: the user's
   ask, 2026-11-07); at once under reduced motion. Its edge 800 while it's typed in, as the system's field */
.wk-control { position: relative; }
.wk-search { flex: 1 1 0; min-width: 0; height: 35px; align-self: center; }
.wk-field { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--search-l, 0); right: var(--search-r, 0);
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 6px; --fill: var(--100);
  transition: left 160ms ease-out, right 160ms ease-out; }
.wk-field:focus-within { left: 0; right: 0; --edge: var(--800); --edge-to: var(--800); }
@media (prefers-reduced-motion: reduce) { .wk-field { transition: none; } }
.wk-search .ic.search { --i: url("../design/assets/icons/search.svg"); color: var(--700); }
.wk-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; outline: none;
  font: inherit; color: var(--900); -webkit-appearance: none; appearance: none; }   /* (the site's Dosage, not the browser's: base.css isn't linked here) */
.wk-search input::placeholder { font: inherit; color: var(--600); }
.wk-search input::-webkit-search-cancel-button, .wk-search input::-webkit-search-decoration { -webkit-appearance: none; }
.wk-sort { flex: none; display: flex; margin-left: auto; }   /* (at the right end; the sort: the design system's filter icon, the user's ask 2026-11-07, its order in the tip and the menu) */
.wk-toggle .ic.drop { display: none; }
.wk-sort { position: relative; }
.wk-pick { width: 35px; justify-content: center; padding-left: 0; padding-right: 0; }
.wk-sort > .wk-menu { left: auto; width: max-content; }   /* (under the icon, its right edge on the icon's) */
.wk-menu { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 2px); display: flex; flex-direction: column; padding: 8px 9px 9px; }
.wk-menu[hidden] { display: none; }
.wk-menu { --fill: var(--100); }
.wk-menu button { padding: 0; border: 0; background: none; --ink: var(--800); --ink-to: var(--1000); font: inherit; text-align: left; cursor: pointer; }
.wk-menu button.on { --ink: var(--1000); }

/* hidden: a strip with the logo and [S], the sidebar sliding out from under it (2-1200x800-collapsed, 102:33782) */
.wk-strip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; visibility: hidden; opacity: 0; }
.wk-strip .btn { flex: none; width: var(--strip); justify-content: center; padding-left: 0; padding-right: 0; }
.wk-strip .logo { height: 33px; }
.wk-strip .top { flex: none; height: calc(var(--strip-s, 195px) - 33px - 12px); }   /* (logo and gaps: system.js wireStrip) */
.wk.sidebar-hidden .wk-side { width: var(--strip); }
.wk.sidebar-hidden .wk-full { visibility: hidden; opacity: 0; }
/* (shown with `inherit`, never `visible`: a visible child stays drawn when the website's hidden for the
   game, body[data-mode="game"] #web, over it and taking its taps; a phone's way into the game, 2026-11-06) */
.wk.sidebar-hidden .wk-strip { visibility: inherit; opacity: 1; }
.wk.sidebar-ready .wk-full, .wk.sidebar-ready .wk-strip { transition: opacity var(--slide), visibility 0s; }
.wk.sidebar-ready.sidebar-hidden .wk-full { transition: opacity var(--slide), visibility 0s var(--slide); }
.wk.sidebar-ready:not(.sidebar-hidden) .wk-strip { transition: opacity var(--slide), visibility 0s var(--slide); }

/* box-project-caption (102:27751): the words take what's left, the details and tags under them */
.wk-main { flex: 1; min-width: 0; display: flex; gap: 6px; }
/* the pictures start under the page's margin but scroll on through it, to the window's edges (99:22645) */
.wk-main .work-images { margin-block: -16px; padding-block: 16px; }
.wk-caption { flex: none; width: var(--side); display: flex; flex-direction: column; padding: 5px 1px 6px; }
.wk-caption > .spine { flex: none; }
.wk-title { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; text-align: center; }
.wk-title h1 { margin: 0; font: 20px/normal "MEKZANTINE", serif; color: var(--ui-accent); text-box: trim-both cap alphabetic; }
.wk-title p { margin: 0; color: var(--ui-800); }
.wk-text { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow-y: auto; scrollbar-width: none; }
.wk-text .bar { flex: none; }
.wk-body p { margin: 0 0 16px; }
.wk-body p:last-child { margin: 0; }
.wk-body a, .wk-details a { --ink: var(--accent); --ink-to: var(--1000); text-decoration: none; }
.wk-details { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 8px 8px; color: var(--ui-500-accent); }
.wk-details div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-details .v { color: var(--ui-900); overflow-wrap: anywhere; }
.wk-tags { flex: none; display: flex; flex-wrap: wrap; gap: 0 8px; padding: 6px 8px; color: var(--ui-700); }
.wk-support { flex: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.wk-support p { margin: 0; }
.wk-support .pics { grid-template: 83px 83px / minmax(0, 1fr); }

/* a tablet (102:38621): the caption above the pictures, the two scrolling together */
@media (max-width: 1179px) {
  .wk-main { display: block; margin-block: -16px; padding-block: 16px; overflow-y: auto; scrollbar-width: none; }
  .wk-main::-webkit-scrollbar { display: none; }
  .wk-caption { width: auto; margin-bottom: 6px; }
  .wk-text { overflow: visible; }
  .work-images { overflow: visible; }
  .wk-main .work-images { margin-block: 0; padding-block: 0; }
}
/* a phone (102:43635): the nav and hide over the work; the list opens over it */
@media (max-width: 599px) {
  .wk { flex-direction: column; padding: 8px; }
  .wk-side, .wk.sidebar-hidden .wk-side { position: static; width: auto; flex: none; }
  .wk-strip { display: none; }
  .wk-full, .wk.sidebar-hidden .wk-full { position: static; width: auto; visibility: inherit; opacity: 1; }   /* (inherit: see .wk-strip's) */
  .wk-control { order: 1; }
  .wk-toggle { width: 35px; justify-content: center; padding-left: 0; padding-right: 0; }   /* (a phone: the list's caret, up while it's open) */
  .wk-toggle b, .wk-toggle .ic.arrow-l { display: none; }
  .wk-toggle .ic.drop { display: block; }
  .wk:not(.sidebar-hidden) .wk-toggle .ic.drop { transform: scaleY(-1); }
  .wk-sort { flex: none; }
  .wk-lists { position: absolute; z-index: 2; inset: 90px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
  .wk.sidebar-hidden .wk-lists { display: none; }
  .wk-list { min-height: 0; }
  .wk-cat, .wk-list, .wk-intro { background: var(--ui-100); }
  .wk-main { flex: 1; min-height: 0; margin: 0 0 -8px; padding: 0 0 8px; }   /* (the nav's above it, so only down) */
  /* the list open, the work's dimmed under it (129:107941), the nav and hide over that */
  .wk::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--ui-100-60); pointer-events: none; }
  .wk.sidebar-hidden::after { display: none; }
  .wk-full .nav { position: relative; z-index: 2; }
  .wk-control { position: relative; z-index: 3; }
}

/* Art market (129:72326): Works' sidebar, then the collection's title and its artworks, scrolling
   together through the margin, as Works' pictures */
.mk { background: var(--ui-100); }   /* (solid: the game's not seen through it) */
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin-block: -16px; padding-block: 16px; overflow-y: auto; scrollbar-width: none; }
.mk-main::-webkit-scrollbar { display: none; }
.mk-main > * { flex: none; }
.mk-title { position: relative; height: 300px; container-type: inline-size; }
.mk-title .frame-roll { height: 100%; }
.mk-over { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px; background: linear-gradient(var(--ui-100-50), var(--ui-100) 72%); pointer-events: none; }
.mk-over h1 { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0; font: 26px/normal "MEKZANTINE", serif; text-transform: uppercase; text-align: center; color: var(--ui-900); }
.mk-caption { flex: none; display: flex; align-items: flex-end; gap: 6px; }
.mk-caption p { flex: 1; min-width: 0; max-width: 300px; margin: 0; color: var(--ui-800); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mk-stats { flex: none; display: flex; gap: 16px; margin-left: auto; white-space: nowrap; }
.mk-stats span { display: flex; gap: 2px; }
.mk-stats b { font-weight: normal; color: var(--ui-500-accent); }
/* too narrow for both side by side (129:93792, 129:105096): the words over the figures, in the middle */
@container (max-width: 568px) {
  .mk-caption { flex-direction: column; align-items: center; gap: 16px; }
  .mk-caption p { flex: none; width: 300px; max-width: 100%; }
  .mk-stats { margin: 0; }
}
.mk-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.mk-none { margin: 0; padding: 16px 4px; color: var(--ui-700); }
@media (min-width: 1600px) { .mk-grid { --cols: 5; } }
@media (max-width: 1179px) { .mk-grid { --cols: 2; } }
@media (max-width: 599px) {
  .mk-grid { --cols: 1; }
  .mk-main { flex: 1; min-height: 0; margin: 0 0 -8px; padding: 0 0 8px; }
  :is(.mk, .dl) .wk-lists { bottom: auto; max-height: calc(100% - 98px); }
  :is(.mk, .dl) .wk-list { flex: 0 1 auto; }
}
/* a card off screen isn't laid out or drawn (a few hundred of them made coming to this page slow) */
.mk-card { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 340px; padding: 12px; margin: 0; border: 0; box-sizing: border-box; background: none; color: var(--ui-700); font: inherit; text-align: left; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 340px; }
.mk-card { --fill: var(--100); --ink: var(--700); --ink-to: var(--700); }
.mk-pic { position: relative; flex: 1; min-height: 0; }
.mk-pic img, .mk-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mk-cap { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 4px; white-space: nowrap; }
.mk-cap .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mk-cap .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ui-1000); }
.mk-cap .d { flex: none; }
.mk-cap .p { min-width: 0; display: flex; gap: 4px; color: var(--ui-800); }
.mk-cap .k { color: var(--ui-500-accent); }

/* A piece's flyout (133:115719, flyout.js), over the page under the theme's 100-50%: landscape, the
   picture beside its caption, to 1000 by 700 (133:108377) or 1500 by 900 (133:112440) */
.fl { position: fixed; inset: 0; z-index: 10; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vmin, 64px); background: var(--ui-100-50); color: var(--ui-900); font: 14px/18px "Dosage Humanist", monospace; }
.fl[hidden] { display: none; }
.fl-box { display: flex; gap: 12px; width: 100%; height: 100%; max-width: 1280px; max-height: 860px; padding: 12px 13px 13px; }   /* (1000 x 700 till the user's ask, 2026-11-07: bigger, to see the details; the page around it, 24-64px, 5% of the window's shorter side) */
.fl-box { --fill: var(--100); }
.fl-close { position: absolute; z-index: 1; top: 12px; right: 13px; padding: 0; border: 0; background: none; --ink: var(--700); --ink-to: var(--accent); cursor: pointer; }
.fl-browse button { --ink-to: var(--accent); }
.fl-frame { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; touch-action: pan-y; }
.fl-frame > * { display: block; flex: none; max-width: 100%; max-height: 100%; }
.fl-cap { flex: none; display: flex; flex-direction: column; box-sizing: border-box; width: 260px; padding: 15px 0 4px; min-height: 0; }
.fl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding-block: 12px; }
.fl-l, .fl-r { display: contents; }
.fl-title { flex: none; display: flex; flex-direction: column; gap: 6px; }
.fl-title h2 { margin: 0; font: 20px/normal "MEKZANTINE", serif; color: var(--ui-1000); text-box: trim-both cap alphabetic; overflow-wrap: anywhere; }
.fl-title p, .fl-details { margin: 0; color: var(--ui-700); }
.fl-text { flex: 0 1 auto; min-height: 36px; margin: 0; overflow-y: auto; scrollbar-width: none; color: var(--ui-1000); overflow-wrap: anywhere; }
.fl-text::-webkit-scrollbar { display: none; }
.fl-text:empty { display: none; }
.fl-details { flex: none; display: flex; flex-direction: column; gap: 2px; }
.fl-buy-slot:empty { display: none; }
.fl-buy-slot { flex: none; display: flex; flex-direction: column; gap: 6px; }
.fl-buy { justify-content: space-between; gap: 8px; --ink: var(--500-accent); --ink-to: var(--accent); }
.fl-buy .p { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ui-900); }
.fl-buy .k { color: var(--ui-700); }
.fl-browse { flex: none; display: flex; align-items: center; justify-content: space-between; color: var(--ui-700); }
.fl-browse button { padding: 0; border: 0; background: none; cursor: pointer; }
.fl.single .fl-browse { visibility: hidden; }
@media (min-width: 1600px) and (min-height: 980px) { .fl-box { max-width: 1600px; max-height: 1040px; } }
/* portrait: the picture over the caption, to go through by swiping (133:114192) */
@media (max-width: 1179px) and (orientation: portrait), (max-width: 599px) {
  .fl { padding: 32px; }
  .fl-box { flex-direction: column; max-width: 900px; max-height: 960px; }
  .fl-frame { width: 100%; box-sizing: border-box; margin-top: 27px; }
  .fl-cap { width: auto; padding: 0 0 4px; }
  .fl-body { flex: none; flex-direction: row; justify-content: flex-start; gap: 24px; padding: 12px; }
  .fl-l, .fl-r { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .fl-l { gap: 32px; }
  .fl-r { justify-content: space-between; gap: 16px; }
  .fl-text { max-height: 144px; }
  .fl-browse { display: none; }
}
/* a phone: a sheet from the bottom of the window, its lower corners below it (133:117044) */
@media (max-width: 599px) {
  .fl { align-items: flex-end; padding: 40px 0 0; }
  .fl-box { height: calc(100% + 6px); max-height: 706px; margin-bottom: -6px; padding-bottom: calc(46px + env(safe-area-inset-bottom)); }
  .fl-cap { padding: 0 8px; }
  .fl-body { flex-direction: column; padding: 0; }
  .fl-l, .fl-r { display: contents; }
  .fl-text { max-height: 108px; }
}

/* Devlog: an entry as a work's caption and pictures, solid behind */
.dl { background: var(--ui-100); }
.dl .wk-text .bar:not(:first-child) { margin-top: 10px; }
.dl-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ui-800); }
.dl-list b { font-weight: normal; color: var(--ui-1000); }
.dl-list a { --ink: var(--accent); --ink-to: var(--1000); text-decoration: none; }
.dl-year { position: relative; flex: none; }
.bar .dl-year-pick { display: flex; align-items: center; --ink: var(--800); --ink-to: var(--1000); }
.wk-cat:has(.dl-years:not([hidden])) { z-index: 4; }
.dl-years { left: auto; right: -9px; min-width: 64px; }
.dl-years a { --ink: var(--800); --ink-to: var(--1000); text-decoration: none; }
.dl-years a.on { --ink: var(--1000); }
.dl-steps { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.dl-steps .newer { justify-content: flex-end; }

/* Wiki: the art market's, a shorter title over the section's tiles and shorter cards, those with
   nothing to show their words instead; on a phone a card's a row */
@media (min-width: 1180px) and (max-width: 1599px) { .mk-grid:is(.wi *) { --cols: 4; } }
.wi-title { height: 170px; }
.wi-title .frame-roll { background: none; }
.wi-title .run { align-items: center; }
.wi-title .run canvas { flex: none; width: 56px; height: 84px; margin-right: 16px; image-rendering: pixelated; }
.wiki-icon { flex: none; image-rendering: pixelated; }
.wi-group { grid-column: 1 / -1; }
.wi-group:not(:first-child) { margin-top: 10px; }
.wk-head { flex: none; margin: 0; color: var(--ui-500-accent); }
.wk-head:not(:first-child) { margin-top: 8px; }
.wi-card { height: 194px; }
.wi-card:not(:has(canvas)) { height: auto; }
.wi-card .mk-pic { display: flex; align-items: center; justify-content: center; }
.wi-card .mk-cap { min-width: 0; }
.wi-card .mk-cap .d { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wi-card .mk-cap .t { flex: 0 0 auto; max-width: 65%; }
.wi-card .mk-pic .wiki-icon { width: 48px; height: 72px; }
.wi-st { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; color: var(--ui-900); }
.wi-st span, .wi-stats span { display: flex; gap: 2px; }
.wi-st b, .wi-stats b { font-weight: normal; color: var(--ui-500-accent); }
.wi-desc { min-width: 0; white-space: normal; color: var(--ui-800); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wi-plain { height: auto; cursor: default; contain-intrinsic-size: auto 120px; }
.mk-card.wi-plain { --edge-to: var(--edge); }
.wi-plain .mk-cap { white-space: normal; }
.wi-plain .mk-cap .d { color: var(--ui-700); }
.wi-plain .wi-desc { display: block; }
.fl-frame .wiki-icon { width: auto; height: min(100%, 288px); aspect-ratio: 2 / 3; }
.fl.no-pic .fl-frame { display: none; }
.fl.no-pic .fl-text { max-height: 270px; }
.fl.no-pic .fl-box { height: auto; max-width: 460px; }
.fl.no-pic .fl-cap { flex: 1; width: auto; min-width: 0; padding-top: 27px; }
.fl-more { display: flex; flex-direction: column; gap: 12px; }
.fl-buy-slot:has(.fl-more) { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.wi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; color: var(--ui-900); }
.wi-stats span { justify-content: space-between; }
.wi-row { display: flex; align-items: flex-start; gap: 8px; color: var(--ui-800); }
.wi-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wi-row p { margin: 0; }
.wi-row .name { color: var(--ui-1000); }
.wi-row .wiki-icon { width: 16px; height: 24px; }
.wi-lines { display: flex; flex-direction: column; gap: 2px; color: var(--ui-accent); }
.wi-lines p { margin: 0; }
@media (max-width: 599px) {
  .wi-title .mk-caption p { text-align: center; }
  .wi-card, .wi-card:not(:has(canvas)) { flex-direction: row; align-items: center; height: auto; padding: 9px; }
  .wi-card .mk-pic { flex: none; width: 48px; height: 72px; }
  .wi-card .mk-cap { flex: 1; min-width: 0; padding: 0; }
  .fl-frame .wiki-icon { height: min(100%, 192px); }
  .fl-buy-slot:has(.fl-more) { max-height: 220px; }
}

/* View.txt (web/txt.js): every work's picture floating in space around you, drawn on a
   canvas on the ground (WebGL); the nav over it at the top left as in the sidebar. The stage holds what's moving (a video, a moving picture), unseen,
   to be copied onto the pictures in space */
.cv { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--100); color: var(--900); font: 14px/18px "Dosage Humanist", monospace; }
.cv-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.cv-gl.over { cursor: pointer; }
.cv.dragging .cv-gl { cursor: grabbing; }
.cv-gl:focus-visible { outline: 1px dashed var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset) - 1px); }
.cv-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; color: var(--700); text-align: center; }
.cv-stage { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0.01; pointer-events: none; z-index: -1; }   /* (not 0: a browser only moves on a moving picture it can see) */
.cv > .nav { position: absolute; z-index: 2; top: 16px; left: 16px; width: 256px; }
.cv-words p { margin: 0 0 12px; }
.cv-words > :last-child { margin-bottom: 0; }
.cv-words a { --ink: var(--500-accent); --ink-to: var(--accent); }
.cv-go { --ink: var(--900); --ink-to: var(--1000); }
.fl-frame > .cv-yt { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 599px) {
  .cv > .nav { top: 8px; left: 8px; right: 8px; width: auto; }
}

@media (min-width: 1180px) and (min-height: 900px) {
  .recent-grid .link-box:nth-child(n + 9) { display: flex; }
  .recent-grid .link-box:nth-child(n + 13) { display: none; }
}
@media (min-width: 1180px) and (min-height: 1000px) {
  .work-card.second { display: flex; }
  .recent-grid .link-box:nth-child(n + 13) { display: flex; }
}
@media (min-width: 1180px) and (max-height: 719px) {
  .recent-grid .link-box:nth-child(n + 5) { display: none; }
}

/* a tablet (98:45882): head and work above, the game's boxes and the rest under, the game between */
@media (max-width: 1179px) {
  .home { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(220px, 1fr) auto auto; gap: 6px; }
  .home .col { display: contents; }
  .home .top { grid-area: 1 / 1; }
  .works-col { grid-area: 1 / 2; }
  .mid { grid-area: 2 / 1 / 3 / 3; }
  .game-card { grid-area: 3 / 1 / 5 / 2; }
  .theme-card { grid-area: 3 / 2; }
  .recent-card { grid-area: 4 / 2; }
  .work-card { min-height: 0; }
}
/* a phone (98:51501, nav 98:32740): one column, the nav's buttons at once, no TXT and none of their
   keys; themes, a work and the game's boxes, with no intro, quick access, DOS-AGE box or list. The
   work takes what's left, or on a short phone the page scrolls. A row's buttons have no side padding but share out what's
   left, so that they fill it on any phone: the nav and themes as Figma's 9px at 390 wide, DOS-AGE
   17px, DOSAGE 1.5px (the ratios of what each has spare there) */
@media (max-width: 599px) {
  .home { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
  .nav .side { display: contents !important; }
  .nav .more, .nav b, .nav .dot, .nav .off { display: none; }
  .nav { gap: 6px; }
  .nav .btn { flex: 18 1 auto; justify-content: center; padding-left: 0; padding-right: 0; }
  .nav .grow { flex-grow: 34; }
  .nav .logo { flex: none; width: 33px; }
  .about-row, .home .quick-card, .mid, .recent-card { display: none; }
  .theme-card { order: 1; }
  .works-col { order: 2; flex: 1; min-height: 300px; }
  .game-card { flex: none; height: 220px; min-height: 0; order: 3; }
  .game-card .pics { grid-template-rows: 85px 84px; }
  .theme-row .side { flex-wrap: nowrap; }
  .theme-row .btn:not(.more) { flex: 6 1 auto; padding-left: 0; padding-right: 0; }
  .theme-row .btn[data-theme-id="dos-age"] { flex-grow: 1; }
  .theme-row .btn .wide { display: none; }
  .theme-row .btn .phone { display: inline; }
}
/* (DOS-AGE has no arrow on a phone, the user's ask, 2026-11-06: its row was cramped once View.txt
   joined it. Under 375 wide the row hasn't room for its words even so (5px spare at 375, 2 at 360,
   none at 350), so there the nav's two sides come back, the arrow going between them, as on a computer) */
@media (max-width: 374px) {
  .nav .side { display: flex !important; flex: 1; gap: 6px; min-width: 0; }
  .nav.b .side.a, .nav:not(.b) .side.b { display: none !important; }
  .nav .more { display: flex; flex: none; width: 24px; }
}
/* (.txt on a phone keeps the two sides and their keys, 136:132888, unlike the pages' nav above) */
@media (max-width: 599px) {
  .tx .nav .side { display: flex !important; flex: none; }
  .tx .nav.b .side.a, .tx .nav:not(.b) .side.b { display: none !important; }
  .tx .nav .more, .tx .nav .off { display: flex; }
  .tx .nav .grow { display: none; }
  .tx .nav b { display: inline; }
  .tx .nav .btn { flex: none; width: auto; padding: 8px 9px 9px; }
  .tx .nav .more { width: 24px; padding: 8px 0 9px; }
  .tx .nav .logo { padding: 7px 8px 8px; }
}

/* [M] Inquire/Commission (web/inquire.js): the design system's dialog with the site's panel inside, a
   bar, the switch, the two fields and Send, the address (or what's wrong) at the foot on one line,
   so a message never moves anything. Sent, the thank-you takes the form's place at its size */
.inq { padding: 12px 13px 13px; --fill: var(--ui-100); font: 14px/18px "Dosage Humanist", monospace; }
.inq-form, .inq-sent { display: flex; flex-direction: column; gap: 12px; }
.inq-form[hidden], .inq-sent[hidden] { display: none; }
.inq .field input, .inq .field textarea { font: inherit; }
.inq-send { justify-content: center; }
.inq-send:disabled { --ink: var(--400); --ink-to: var(--400); --edge-to: var(--edge); cursor: progress; }
.inq-foot { margin: 0; min-height: 18px; color: var(--ui-700); }
.inq-foot a { color: var(--ui-900); text-decoration: none; --ink: var(--ui-900); --ink-to: var(--ui-1000); }
.inq-foot .link { padding: 0; font: inherit; }
.inq-foot .code-copy { margin-left: 4px; vertical-align: top; --ink: var(--ui-700); --ink-to: var(--ui-1000); }
/* (the design system's base.css, which the site doesn't link, sizes its icons and hides what's only read out;
   site.css's own .icon, a masked box for the header's, is undone here: these are the system's SVGs) */
.inq svg.icon { display: inline-block; width: 15px; height: 15px; fill: currentColor; background: none; -webkit-mask: none; mask: none; }
.inq .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inq-say { color: var(--bad); }
.inq-sent p { margin: 0; color: var(--ui-900); }
.inq-sent .inq-to { color: var(--ui-1000); }
.inq-sent .btn { margin-top: auto; justify-content: center; }
.inq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Shop (web/shop.js): the art market's page, with the design system's breadcrumb over its grid, a tag
   on each card for its kind, and the item's options as a switch over Buy in the flyout; its sidebar one box
   with the system's tree (categories as groups, their collections as rows), scrolling when it's longer */
.wk-tree { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.wk-tree::-webkit-scrollbar { display: none; }
.sh-crumbs { flex: none; display: flex; align-items: center; box-sizing: border-box; height: 35px; margin-bottom: -2px; padding: 0 4px; }   /* (the nav's height, then the sidebar's 6px: the cards start level with its Hide sidebar and sort row, the user's ask 2026-11-07) */
.sh-crumbs li[aria-current], .sh-crumbs .link { color: var(--700); --ink: var(--700); }   /* (quiet, 700: the user's ask 2026-11-07; a link still dissolves to 1000) */
.mk-cap .tag { flex: none; }
.sh-options { flex-direction: column; width: auto; }   /* (one under another: three side by side don't fit the flyout's 230px) */

/* Shop › All's banner (web/shop.js): 50vh (70 till the user's ask, 2026-11-07), a slide at a time. No edge or boxes (the user's ask, 2026-11-07): the
   picture fills it and fades into the page's ground, a soft, eased wash of the ground (mixes of --100, as the art
   market's banner had) from the foot up, a little deeper at the bottom left under the words, which sit on it as they are:
   its label, title (MEKZANTINE 36), words, price and [B]/[G] buttons; previous, "2 / 5", next at the right.
   A deviation (gradients), listed in CLAUDE.md */
.sh-hero { position: relative; flex: none; height: 50vh; min-height: 360px; overflow: hidden; }
/* (its corners the px-box's stepped ones, the outline of its edge, with no edge drawn: the user's ask, 2026-11-07) */
.sh-hero { clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 1px, calc(100% - 3px) 1px, calc(100% - 3px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 3px, calc(100% - 1px) 3px, calc(100% - 1px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 1px) calc(100% - 5px), calc(100% - 1px) calc(100% - 3px), calc(100% - 2px) calc(100% - 3px), calc(100% - 2px) calc(100% - 2px), calc(100% - 3px) calc(100% - 2px), calc(100% - 3px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 1px), 3px calc(100% - 1px), 3px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 3px), 1px calc(100% - 3px), 1px calc(100% - 5px), 0 calc(100% - 5px), 0 5px, 1px 5px, 1px 3px, 2px 3px, 2px 2px, 3px 2px, 3px 1px, 5px 1px); }
.sh-hero[hidden] { display: none; }
.sh-hero.art { height: 35vh; min-height: 300px; }   /* (digital art's, a chain's or a collection's: shorter, the user's ask 2026-11-07) */
.sh-slide { position: absolute; inset: 0; overflow: hidden; background: var(--100); }
.sh-slide[hidden] { display: none; }
.sh-slide.coming { z-index: 1; }
.sh-pic { position: absolute; inset: 0; }
.sh-pic > img, .sh-pic > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* (eased: many soft stops, no hard band) */
  background: linear-gradient(to top, var(--100) 0%, color-mix(in srgb, var(--100) 92%, transparent) 6%, color-mix(in srgb, var(--100) 80%, transparent) 13%, color-mix(in srgb, var(--100) 64%, transparent) 21%, color-mix(in srgb, var(--100) 47%, transparent) 30%, color-mix(in srgb, var(--100) 32%, transparent) 40%, color-mix(in srgb, var(--100) 19%, transparent) 51%, color-mix(in srgb, var(--100) 9%, transparent) 63%, color-mix(in srgb, var(--100) 3%, transparent) 76%, transparent 90%),
    radial-gradient(ellipse 65% 55% at 0% 100%, color-mix(in srgb, var(--100) 45%, transparent) 0%, color-mix(in srgb, var(--100) 30%, transparent) 35%, color-mix(in srgb, var(--100) 14%, transparent) 60%, color-mix(in srgb, var(--100) 4%, transparent) 82%, transparent 100%); }
.sh-copy { position: absolute; left: 24px; bottom: 24px; z-index: 1; box-sizing: border-box; width: min(460px, calc(100% - 48px));
  display: flex; flex-direction: column; gap: 8px; }
.sh-kicker { color: var(--500-accent); }
.sh-title { margin: 0; font: 36px/48px "MEKZANTINE", serif; color: var(--1000); -webkit-font-smoothing: none; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.sh-text { margin: 0; color: var(--900); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sh-price { display: flex; gap: 4px; color: var(--900); }
.sh-price .k { color: var(--500-accent); }
.sh-price .d { color: var(--700); }
.sh-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--900); }   /* (a collection's: 1/1 x12, Editions x3, Collectors x40, as the art market's) */
.sh-stats b { font-weight: normal; color: var(--500-accent); }
.sh-piece { min-width: 0; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--1000); }
.sh-ctas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-nav { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.sh-nav button { display: flex; padding: 0; border: 0; background: none; cursor: pointer; --ink: var(--800); --ink-to: var(--1000); }
.sh-count { min-width: 5ch; text-align: center; color: var(--800); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {   /* (a phone: the words across the foot, the arrows in the top right) */
  .sh-copy { left: 12px; bottom: 12px; width: calc(100% - 24px); }
  .sh-title { font-size: 18px; line-height: 24px; }
  .sh-text { -webkit-line-clamp: 2; }
  .sh-nav { top: 12px; right: 12px; bottom: auto; }
  .sh-pic::after { background: linear-gradient(to top, var(--100) 0%, color-mix(in srgb, var(--100) 92%, transparent) 8%, color-mix(in srgb, var(--100) 80%, transparent) 17%, color-mix(in srgb, var(--100) 64%, transparent) 27%, color-mix(in srgb, var(--100) 47%, transparent) 37%, color-mix(in srgb, var(--100) 32%, transparent) 47%, color-mix(in srgb, var(--100) 19%, transparent) 57%, color-mix(in srgb, var(--100) 9%, transparent) 68%, color-mix(in srgb, var(--100) 3%, transparent) 80%, transparent 92%); }
}
/* the picked option's words under the switch (the fonts' packages): every one laid in the same cell, the others
   hidden by visibility, so it's as tall as the longest and picking never moves Buy */
.sh-opt { display: grid; margin: 0; color: var(--800); }
.sh-opt > span { grid-area: 1 / 1; }
.sh-opt > span[hidden] { display: block; visibility: hidden; }
.wk-none { margin: 0; color: var(--ui-700); }   /* (a sidebar list's search with nothing found: works.js) */