/* hallmark: custom. Idea only this studio has: the page sits on the game's own marbled table, stirred the way the game stirs it.
   nav: a logo and four plain words, no bar and no hairline. footer: one line.
   critique: the game speaks in its own Silver and gold panel; the collective speaks in plain serif, lowercase.
   waive 1: display is a system serif. No font files were downloaded for this sample; a webfont can replace --plain.
   waive 39b: the gold panel button is taller than 52px, it is the game's own control.
   waive 80: the boat loop is a small drawn figure that carries the name story. */
@font-face { font-family:Silver; src:url(stack-and-brew/art/Silver.woff2) format("woff2"); font-display:swap }

:root {
  --ground:#0d141f; --plate:#0d0b1c; --paper:#ebe0cc; --dim:#b9ad99; --gold:#f7c44c; --edge:#e8b85a; --outline:#13091c; --shadow:#000;
  --line-c:#2d464c; --card-name:#ffffff; --bright:#fff6dc; --mint:#72eecf; --leaf:#a6d463;
  --plain:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif","URW Palladio L",Georgia,serif;
  --pixel:Silver,monospace;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:104px; --space-7:168px;
  --gutter:clamp(64px,5vw,96px);
  --max:1360px;
  --silver-down:calc(2em / 19);
  --band:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAADYCAYAAABIi6UEAAABqElEQVR42u3cwa7iQAxEUTfi/385LFlFpEOUtO1zlxHKouTiqtCbGRGxxZcR15P6/a+AgAAAAIDLGSe2TKvPmxoCArC4xcIvh/vv9yXNYgBsMVuMxQDg5i3Gbr6kWQxA3i3muS9pFgNgi9liLAYAtpgtxmIAwGIsxmIAWIzFIKATP9r7od4FqRiLsZiKAQCLsRiL2WK2mIqxGIupGP7/73Ha2s0FqRiLsZiKNdxis8+Xfb8LUjEWYzEVs8VsMRVjMRZjMRV7cIu1fe6CVIzFWEzFWIzFVIzF1IrFVIzFWEzFWIzFVAwsxmIq9pTFjlSx1eddkIqxGIupWIEtNmuH2efLvt8FqRiLsZiK2WK2mIqxGIuxmIol2mJlPu+CVIzFWEzFCmwxFwQBsRiLqVg9i81un3Tvd0EqxmIspmK2mAsSEIuxGIupGIu5IAGxGIupGFjMBQnoLt7+9JfFVIzFXJCASm6xtv8Mk8VUjMVckIBsMVtMxcBiLkhAibZYyc+7IAGxmAsSkIAEJCABQUACssVsMRWzxVyQgCAgAQlIQAISkIAEBAH94gN07LYqHn2bMgAAAABJRU5ErkJggg==);
  --band-end:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAADYCAYAAABIi6UEAAABs0lEQVR42u3cQW4CQQxEUTfi/ldu9kiDsBpmpu33d0HAouTiq1CSEREzcMhDBAISkIAEJCABCUhAEJCAfs94+3kmX1P++S5IQOsV83WHCxKQgAQkIAEJSECwxWwxFbPFXJCACvFkq8/Pd0EqxmIuSEBNtlj28S3e3wWpGIu5IAHZYraYirEYXJCATt5iw+MuSMVYzAUJiMVYTMVYDC5IQCzGYirWz2LZL8a3e38XpGIsxmIqZou5IAGxGIuxmIqdYDG/NOWCVIzFWEzF6m2xtnZzQSrGYiymYg23WJk/z3RBKsZiLKZitpgtpmIsxmIspmIXbrG2j7sgFWMxFlMxFmMxFWMxtWIxFWMxFlMxFmMxFQOLsZiKXWWxI2byNWWe74JUjMVYTMUKbLGsHbKP3/b9XZCKsRiLqZgtZoupGIuxGIup2EZbrMzzXZCKsRiLqRgAFmMxFmMxW8wWUzEWYzEVAwAWYzEWAwAWYzEWA9Dz14B9ge9DmsUA2GK2GIsBgC1mi7EYAHy/xdjNhzSLAajx73HiDzbZ4v19SLMYAFvMFmMxAAAAAItbLDp902hqCGiNF5nWtiq+ErxLAAAAAElFTkSuQmCC);
  --band-side:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAABICAYAAACURjuuAAABV0lEQVR42u3cQQqDQAxA0T+l97+ybrvpokVxHN9bleBKCAkxzai2fjM+fm8TPy++XvybaZ9/BZxGgsGJxh8t4tPf193a3bu0VSoYIMFgGu8F2i1x8aPaZhUMtIiAKeLD291M/1QwkGBAh00R7SKK20VUwUCLCJkimv7ZRTSNVMFAgkGmiFe2Z+Liy3xkV8FAiwiZIppG+osHKhhIMMguol1EcbuI7iKCFhEyRfS+7CJmF1EFAwkGmSI6FCOej+YqGGgRIVNE3EW0i6iCgQSDTBHtIopnF9FdRNAiAqaI7iLaRVTBQIIBuYsoLu4uImgRAVNE7a67iCoYSDAgu4jipn+5iwhaRCBTRHcR7SKqYCDBgNxFNFUTdxcRtIheAZgiuovoLqIKBkgwyC6i6aK4u4iABINMEd1F1FapYIAEg+wimpKJ5y4iIMEgU0R3Ef3FQwUDJBjMbgcVYauxm5LzKQAAAABJRU5ErkJggg==);
}
* { box-sizing:border-box }
html, body { overflow-x:clip }
html { background:var(--ground) }
#ebru { position:fixed; left:0; top:0; width:100%; height:100lvh; z-index:-1; image-rendering:pixelated }
body { margin:0; color:var(--paper); font:20px/1.5 var(--plain); -webkit-font-smoothing:antialiased }
h1, h2, p, ul { margin:0; padding:0 }
ul { list-style:none }
a { color:inherit }
img, video, canvas { display:block }
h2 { font-weight:400; font-size:clamp(52px,7.4vw,112px); line-height:1.02; letter-spacing:-.02em; overflow-wrap:break-word; min-width:0 }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px }
.skip { position:fixed; left:var(--space-2); top:calc(-1 * var(--space-6)); z-index:60; background:var(--paper); color:var(--ground); padding:var(--space-1) var(--space-2) }
.skip:focus { top:var(--space-2) }
.t { position:relative; top:var(--silver-down); display:block }

/* top: the mark and four words, floating over the pot */
.top { position:absolute; z-index:30; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) max(var(--gutter), calc((100% - var(--max)) / 2)); pointer-events:none }
.top a { pointer-events:auto }
.mark img { image-rendering:pixelated; width:180px; height:auto }
.top nav { --nav-gap:var(--space-4); --bead:8px; display:flex; gap:var(--nav-gap); font-size:20px }
.top nav a { position:relative; text-decoration:none; padding:var(--space-1) 2px; text-shadow:0 2px 0 var(--ground), 2px 0 0 var(--ground), -2px 0 0 var(--ground), 0 -2px 0 var(--ground) }
.top nav a::after { content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .18s steps(4) }
.top nav a:hover::after, .top nav a:focus-visible::after { transform:scaleX(1) }
/* beads sit only between the links */
.top nav a + a::before { content:""; position:absolute; top:50%; left:calc(var(--nav-gap) / -2 - var(--bead) / 2); width:var(--bead); height:var(--bead); margin-top:calc(var(--bead) / -2); background:var(--gold); box-shadow:0 0 0 2px var(--ground); transform:rotate(45deg); pointer-events:none }

/* the pot */
.pot { position:relative; min-height:100svh; display:flex; align-items:center; padding:calc(var(--space-6) + var(--space-3)) var(--gutter) var(--space-6); overflow:clip }
.pitch { position:relative; z-index:12; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); width:100%; max-width:var(--max); margin:0 auto; font-family:var(--pixel); font-kerning:none; -webkit-font-smoothing:none }
.pitch { pointer-events:none } .pitch > a { pointer-events:auto }
.pitch h1 img { width:548px; height:auto; image-rendering:pixelated; filter:drop-shadow(0 8px 0 var(--shadow)) }
.plate { background:var(--plate); border:4px solid var(--edge); box-shadow:8px 8px 0 var(--shadow); padding:10px .6em; font-size:38px; line-height:1; text-align:center }
.steam { display:inline-block; position:relative; border:24px solid transparent; border-image:url(stack-and-brew/art/panel_gold.png) 24 fill stretch; image-rendering:pixelated; padding:6px 14px; font:57px/1 var(--pixel); font-kerning:none; -webkit-font-smoothing:none; color:var(--gold); white-space:nowrap; text-decoration:none; text-shadow:3px 3px 0 var(--outline) }
.steam::before, .steam::after { content:""; position:absolute; top:50%; width:51px; height:51px; margin-top:-25px; background:url(stack-and-brew/art/selector.png) 0 0/51px 51px; image-rendering:pixelated; visibility:hidden }
.steam::before { right:calc(100% + var(--space-1)) }
.steam::after { left:calc(100% + var(--space-1)); transform:scaleX(-1) }
.steam:hover, .steam:focus-visible { color:var(--bright) }
.steam:focus-visible { outline:3px solid var(--bright); outline-offset:2px }
.steam:hover::before, .steam:hover::after, .steam:focus-visible::before, .steam:focus-visible::after { visibility:visible }
.steam:active .t { top:calc(var(--silver-down) + 3px) }
.calm { font:inherit; font-style:normal; color:var(--paper); background:none; border:0; padding:var(--space-1) 2px; margin-left:var(--space-2); text-decoration:underline; text-underline-offset:4px; cursor:pointer; text-shadow:inherit }
.calm:hover { color:var(--gold) }
.calm-on .floater .cardbox { animation-play-state:paused }
.aside { position:absolute; z-index:12; right:max(var(--gutter), calc((100% - var(--max)) / 2)); bottom:var(--space-4); font-size:18px }

.floaters { position:absolute; inset:0; z-index:8 }
.floater { position:absolute; cursor:grab; touch-action:pan-y; user-select:none }
.floater.held { cursor:grabbing }
/* a card and its name, the way the game draws them: the name in the top band, Silver small caps, white with a one-pixel dark edge.
   Measured on the game: cap height 12.5 sprite px on a 106 px card, ink centred in the band (rows 1 to 16). --s is css px per sprite px. */
.cardbox { --s:1.5; --ny:9; position:relative; display:block; filter:drop-shadow(6px 10px 0 var(--ground)) }
.cardbox.king { --ny:13 } .cardbox.queen { --ny:10 }
.cardbox img { width:calc(var(--w) * var(--s) * 1px); height:auto; image-rendering:pixelated; pointer-events:none }
.nm { position:absolute; left:0; right:0; top:calc(var(--ny) * var(--s) * 1px); transform:translateY(calc(-50% + 3em / 19)); font:calc(var(--s) * 76px / 3)/1 var(--pixel); font-weight:400; font-kerning:none; -webkit-font-smoothing:none; color:var(--card-name); text-align:center; white-space:nowrap; pointer-events:none;
  --o:calc(1em / 19); text-shadow:var(--o) 0 0 var(--shadow), calc(-1 * var(--o)) 0 0 var(--shadow), 0 var(--o) 0 var(--shadow), 0 calc(-1 * var(--o)) 0 var(--shadow), var(--o) var(--o) 0 var(--shadow), calc(-1 * var(--o)) var(--o) 0 var(--shadow), var(--o) calc(-1 * var(--o)) 0 var(--shadow), calc(-1 * var(--o)) calc(-1 * var(--o)) 0 var(--shadow) }
.nm small { font-size:.8em }
.floater .cardbox { animation:float 5.6s steps(14) infinite alternate }
.f1 { right:15%; top:15% } .f1 img { --w:176 }
.f2 { right:6%; top:52% } .f2 img { --w:106 } .f2 .cardbox { animation-delay:-2s }
.f3 { right:28%; top:58% } .f3 img { --w:106 } .f3 .cardbox { animation-delay:-3.7s }
@keyframes float { from { transform:translateY(-6px) rotate(-2deg) } to { transform:translateY(8px) rotate(2deg) } }

/* the shop: real footage that melts into the page */
.shop { position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-4); align-items:center; max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:var(--space-6) var(--gutter) var(--space-6) 0 }
.stage { position:relative; aspect-ratio:16/9; overflow:clip;
  -webkit-mask:var(--band) 0 0/24px 72px repeat-x, var(--band-end) 0 100%/24px 72px repeat-x, linear-gradient(var(--shadow) 0 0) 0 72px/100% calc(100% - 144px) no-repeat;
  mask:var(--band) 0 0/24px 72px repeat-x, var(--band-end) 0 100%/24px 72px repeat-x, linear-gradient(var(--shadow) 0 0) 0 72px/100% calc(100% - 144px) no-repeat }
.side { position:absolute; inset:0; overflow:clip;
  -webkit-mask:var(--band-side) 100% 0/72px 24px repeat-y, linear-gradient(var(--shadow) 0 0) 0 0/calc(100% - 72px) 100% no-repeat;
  mask:var(--band-side) 100% 0/72px 24px repeat-y, linear-gradient(var(--shadow) 0 0) 0 0/calc(100% - 72px) 100% no-repeat }
.stage video { position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; transition:opacity .22s steps(4); transform:translate3d(calc(var(--lx,0) * -22px), calc(var(--ly,0) * -14px), 0) }
.stage video.on { opacity:1 }
.stage video.royal { inset:54px -3% -3%; height:calc(106% - 54px); object-position:50% 0 }
.shop h2 { font-size:clamp(44px,5.2vw,80px) }
.table { position:relative; height:470px; margin:var(--space-3) 0 var(--space-1) }
.card { position:absolute; padding:0; border:0; background:none; cursor:grab; touch-action:pan-y; user-select:none }
.card.held { cursor:grabbing }
.card .cardbox { filter:drop-shadow(5px 7px 0 var(--shadow)); transition:transform .16s steps(3) }
.card:hover .cardbox, .card:focus-visible .cardbox { transform:translateY(-10px) rotate(-3deg) }
.c1 img { --w:176 } .c2 img { --w:144 } .c3 img { --w:128 } .c4 img { --w:106 }
.c1 { left:0; top:0 } .c2 { left:26%; top:128px } .c3 { left:60%; top:16px } .c4 { left:69%; top:262px }
.hint { color:var(--dim); font-style:italic; font-size:18px }
.more { display:flex; gap:var(--space-4); margin-top:var(--space-3) }
.line { position:relative; text-decoration:none; padding:var(--space-1) var(--space-3); white-space:nowrap }
.line::before, .line::after { content:""; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px; background:var(--gold); transform:scale(0); transition:transform .16s steps(3) }
.line::before { left:0 } .line::after { right:0 }
.line:hover::before, .line:hover::after, .line:focus-visible::before, .line:focus-visible::after { transform:scale(1) rotate(45deg) }
.more .line:first-child { padding-left:0 } .more .line:first-child::before { left:-16px }

/* more games: each game with its own picture, nothing overlaps */
.games { max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:var(--space-7) var(--gutter) var(--space-6) }
.shelf { display:grid; grid-template-columns:minmax(0,.835fr) minmax(0,1.78fr) minmax(0,1fr); gap:var(--space-4); align-items:end; margin-top:var(--space-5) }
.tile a { display:block; text-decoration:none }
.pic { display:block; overflow:clip; box-shadow:8px 8px 0 var(--shadow); transition:transform .16s steps(3) }
.pic img, .pic video { display:block; width:100%; height:100%; object-fit:cover }
.pic.scrap { aspect-ratio:748/896 } .pic.wide { aspect-ratio:513/288 } .pic.square { aspect-ratio:1 }
.crisp { image-rendering:pixelated }
.name { position:relative; display:block; width:fit-content; margin:var(--space-3) auto 0; font-size:clamp(26px,2.6vw,38px); line-height:1.15; text-align:center; transition:color .12s steps(2) }
.name::before, .name::after { content:""; position:absolute; top:50%; width:34px; height:34px; margin-top:-17px; background:url(stack-and-brew/art/selector.png) 0 0/34px 34px; image-rendering:pixelated; visibility:hidden }
.name::before { right:calc(100% + var(--space-1)) } .name::after { left:calc(100% + var(--space-1)); transform:scaleX(-1) }
.tile a:hover .pic, .tile a:focus-visible .pic { transform:translateY(-8px) }
.tile a:hover .name, .tile a:focus-visible .name { color:var(--gold) }
.tile a:hover .name::before, .tile a:hover .name::after, .tile a:focus-visible .name::before, .tile a:focus-visible .name::after { visibility:visible }
.commissioned { margin-top:var(--space-6) }
h3 { margin:0; font-weight:400; font-size:clamp(34px,3.6vw,52px); line-height:1.1; letter-spacing:-.015em }
.commissioned p { color:var(--dim); margin-top:var(--space-1) }
.commissioned ul { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-3) }
.commissioned a { display:flex; align-items:center; gap:var(--space-2); min-height:72px; text-decoration:none; font-size:24px }
.commissioned img { width:72px; height:72px; object-fit:cover; flex:none; box-shadow:4px 4px 0 var(--shadow); transition:transform .16s steps(3) }
.commissioned a:hover span, .commissioned a:focus-visible span { color:var(--gold) }
.commissioned a:hover img, .commissioned a:focus-visible img { transform:translateY(-4px) }

/* about */
.about { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:var(--space-5); align-items:end; max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:var(--space-6) var(--gutter) var(--space-7) }
.note p { font-size:clamp(22px,2.2vw,30px); line-height:1.35; max-width:34ch; margin-top:var(--space-3) }
.headfirst { margin:var(--space-4) 0 0; display:flex; flex-direction:column; gap:var(--space-1) }
#boat { width:600px; max-width:100%; aspect-ratio:150/34; height:auto; image-rendering:pixelated }
.headfirst figcaption { color:var(--dim); font-style:italic; font-size:20px }
.note .founder { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-2); max-width:none; font-size:22px; margin-top:var(--space-4) }
.person { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 var(--space-3); background:var(--plate); border:2px solid var(--edge); box-shadow:4px 4px 0 var(--shadow); color:var(--paper); line-height:1; white-space:nowrap; text-decoration:none; transition:background-color .1s steps(2), color .1s steps(2), transform .08s steps(2), box-shadow .08s steps(2) }
.person:hover { background:var(--gold); color:var(--ground) }
.person:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--shadow) }
.person:focus-visible { outline:3px solid var(--bright); outline-offset:3px }
.partners p { color:var(--dim); font-size:18px; margin-bottom:var(--space-2) }
.partners a { display:flex; align-items:center; padding:var(--space-2) 0; transition:transform .16s steps(3) }
.partners a:hover { transform:translateX(8px) }
.partners a + a { border-top:1px solid var(--line-c) }
.partners img { height:44px; width:auto; max-width:220px; object-fit:contain }

/* say hi: the same pot, coming back */
.hi { position:relative; min-height:70svh; display:flex; align-items:flex-end; padding:var(--space-7) var(--gutter) var(--space-5) }
.hi-copy { position:relative; z-index:6; width:100%; max-width:var(--max); margin:0 auto }
.mail { display:block; width:fit-content; max-width:100%; margin-top:var(--space-2); font-size:clamp(28px,5.2vw,76px); line-height:1.1; letter-spacing:-.015em; overflow-wrap:break-word; text-decoration-thickness:2px; text-underline-offset:10px; text-shadow:0 3px 0 var(--ground) }
.mail:hover { color:var(--gold) }
.hi-copy > p { max-width:44ch; margin-top:var(--space-4); text-shadow:0 2px 0 var(--ground) }
.hi-copy > p a { text-underline-offset:4px }
.social { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); margin-top:var(--space-4) }
.social a { display:block; padding:var(--space-1) 0; text-shadow:0 2px 0 var(--ground); text-underline-offset:4px; transition:color .12s steps(2) }
.social a:hover { color:var(--gold) }
.foot { display:flex; gap:var(--space-4); max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:var(--space-3) var(--gutter); color:var(--dim); font-size:16px }
.foot span { margin-right:auto }
.foot a { text-underline-offset:4px }
.foot a:hover { color:var(--gold) }

.stick { display:none }

/* reveals only when scripting runs */
.js .rv, .js .games h2, .js .shop h2 { opacity:0; transform:translateY(28px); transition:opacity .4s steps(6), transform .4s steps(6) }
.js .tile { opacity:0; transform:translateY(32px); transition:opacity .4s steps(6), transform .4s steps(6) }
.js .rv.in, .js .games h2.in, .js .shop h2.in, .js .tile.in { opacity:1; transform:none }
.js .tile:nth-child(2) { transition-delay:.08s } .js .tile:nth-child(3) { transition-delay:.16s }

@media (max-width:1100px) {
  .f1 { right:6% } .f3 { right:20% }
  .pitch h1 img { width:411px }
}
@media (max-width:820px) {
  :root { --gutter:16px }
  body { font-size:18px }
  .top { padding:var(--space-2) var(--gutter) }
  .mark img { width:120px }
  .top nav { --nav-gap:var(--space-3); --bead:6px; font-size:17px }
  .top nav a:first-child { display:none }
  .top nav a:nth-child(2)::before { display:none }
  .pot { align-items:flex-start; padding-top:calc(var(--space-6) - var(--space-2)); padding-bottom:calc(var(--space-7) + var(--space-5)) }
  .pitch { gap:var(--space-2) }
  .pitch h1 img { width:auto; height:224px; max-width:100%; object-fit:contain; object-position:0 50% }
  .plate { font-size:38px; box-shadow:5px 5px 0 var(--shadow) }
  .steam { font-size:38px; border-width:16px; padding:3px 8px }
  .steam::before, .steam::after { display:none }
  .aside { right:auto; left:var(--gutter); bottom:var(--space-3); font-size:16px }
  .cardbox { --s:.75 }
  .f1 { right:auto; left:6%; top:auto; bottom:64px }
  .f2 { right:8%; top:auto; bottom:70px }
  .f3 { right:38%; top:auto; bottom:44px }
  .shop { grid-template-columns:minmax(0,1fr); padding:var(--space-5) 0 var(--space-5) }
  .shop-copy { padding:0 var(--gutter) }
  .stage { aspect-ratio:16/10;
    -webkit-mask:var(--band) 0 0/24px 72px repeat-x, var(--band-end) 0 100%/24px 72px repeat-x, linear-gradient(var(--shadow) 0 0) 0 72px/100% calc(100% - 144px) no-repeat;
    mask:var(--band) 0 0/24px 72px repeat-x, var(--band-end) 0 100%/24px 72px repeat-x, linear-gradient(var(--shadow) 0 0) 0 72px/100% calc(100% - 144px) no-repeat }
  .table { height:250px }
  .c1 { top:0 } .c2 { left:30%; top:76px } .c3 { left:60%; top:4px } .c4 { left:73%; top:132px }
  .more { flex-wrap:wrap; gap:var(--space-1) var(--space-4) }
  .more .line:first-child::before { left:0 } .more .line:first-child { padding-left:var(--space-3) }
  .games { padding-top:var(--space-6) }
  .shelf { grid-template-columns:minmax(0,1fr); gap:var(--space-5); margin-top:var(--space-4) }
  .pic.scrap { width:62%; margin:0 auto }
  .pic.square { width:72%; margin:0 auto }
  .name::before, .name::after { display:none }
  .commissioned ul { flex-direction:column }
  .commissioned a { font-size:22px }
  .about { grid-template-columns:minmax(0,1fr); padding-bottom:var(--space-6) }
  .hi { min-height:72svh; padding-bottom:var(--space-6) }
  .foot { padding-bottom:calc(var(--space-6) + var(--space-4)) }
  .stick { display:flex; justify-content:center; position:fixed; z-index:40; left:0; right:0; bottom:0; padding:var(--space-1); transform:translateY(120%); transition:transform .2s steps(5); pointer-events:none }
  .stick a { pointer-events:auto }
  .stick.show { transform:none }
}
@media (hover:none) {
  .card:hover .cardbox { transform:none }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .floater .cardbox { animation:none }
  .person, .pic, .commissioned img, .stage video, .line::before, .line::after, .name, .card .cardbox, .top nav a::after, .partners a, .social a, .stick { transition:none }
  .js .rv, .js .games h2, .js .shop h2, .js .tile { opacity:1; transform:none; transition:none }
}