/* The content gallery, /gallery (owner order, 25 Oct 2026; design B, the studio shelf). A slim control rail (the title,
   the lead, the three tabs, the house rule and BECOME A PARTNER) beside a dense wall on dark CRT glass: reels at their
   full 9:16 height, never cropped, and memes at their own shape, each in a thin riveted frame with its tag, picture and
   keys. On phones the rail's top sits over a two-column wall and its foot follows the wall.
   Faces, from the site's tokens (the owner's choice of 26 Oct 2026: Jersey 20, the face of the approved designs, on
   headings, keys, labels and figures; sentences stay monospace): the pixel role (--t-font-pixel) for the title only; the
   display role (--t-font-display) for every other heading, key, tag and name; QUIT Figures for the counts (all three
   Jersey 20, /theme/fonts/display.css); QUIT Text (IBM Plex Mono 600, /theme/fonts/body.css) for the lead and the house
   rule. Frames and keys are the site's deck plates laid as 9-slice border-images. The page sits in the site shell,
   whose stylesheets load after this one, so every rule is scoped under .qg. */

.qg{
 --qg-green:#00ee83;--qg-orange:#ff610b;--qg-cream:#f4e7cb;--qg-black:#030805;--qg-focus:#fff0ad;
 --qg-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);
 --qg-face:var(--t-font-display,"QUIT Display",monospace);
 --qg-fig:"QUIT Figures","QUIT Figures Fallback",monospace;
 --qg-text:"QUIT Text",monospace;
 --qg-deck:url(/runtime/quit/community-art/deck.webp) 66 76 72 76/20px stretch;
 --qg-bay:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/12px stretch;
 --qg-top:calc(var(--c-header-height,var(--t-header-desktop,70px)) + 12px);
 box-sizing:border-box;display:grid;grid-template-columns:clamp(250px,20vw,330px) minmax(0,1fr);gap:14px;align-items:start;
 width:100%;max-width:1880px;margin:0 auto;padding:14px clamp(8px,1.2vw,20px) 32px;
 color:var(--qg-cream);font:600 16px/1.45 var(--qg-text);text-align:left
}
.qg *,.qg *::before,.qg *::after{box-sizing:border-box}
.qg :where(h1,p,ul,li){margin:0;padding:0}
.qg [hidden]{display:none!important}
.qg :focus-visible{outline:3px solid var(--qg-focus);outline-offset:3px}

/* The shell's lobby deck and loader stay off this page, as on /partners and /office: the loader's styles live in a
   <style> the utility wrapper does not carry, and main takes back the deck's room under the fixed header. */
body:has(.qg)>.q-ca,body:has(.qg)>.q-boot{display:none}
body:has(.qg)>.q-ca~.frame-main{padding-top:var(--c-header-height,var(--t-header-desktop,70px))}

/* ---------------------------------------------------------------- the rail: one plate the height of the window */
.qg-rail{position:sticky;top:var(--qg-top);display:flex;flex-direction:column;gap:18px;height:calc(100svh - var(--qg-top) - 12px);min-height:0;
 overflow-y:auto;scrollbar-width:thin;padding:16px clamp(12px,1.2vw,20px) 18px;border:12px solid transparent;border-image:var(--qg-deck);
 background:#010805;background-clip:padding-box;container-type:inline-size}
.qg-h1{margin:0 0 14px;color:var(--qg-orange);font:700 min(16.2cqi,50px)/1.08 var(--qg-pixel);letter-spacing:.01em;text-shadow:3px 3px 0 #6b2200,4px 4px 0 #000}
.qg-h1 span{display:block}
.qg-lead{color:var(--qg-cream);font:600 clamp(14px,6.2cqi,17px)/1.55 var(--qg-text)}
.qg-tabs{display:grid;gap:10px;margin-top:20px;padding:8px;border:10px solid transparent;border-image:var(--qg-bay)}
.qg-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:58px;margin:0;padding:5px 14px 8px 16px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/9px 10px 12px stretch;background:none;
 color:var(--qg-green);font:600 clamp(16px,7.4cqi,21px)/1 var(--qg-face);letter-spacing:.05em;text-align:left;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.qg-tab[aria-pressed="true"]{border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/9px 10px 12px stretch;color:#03200f}
.qg-count{color:var(--qg-orange);font:400 clamp(30px,15cqi,44px)/.9 var(--qg-fig);letter-spacing:.01em;text-shadow:2px 2px 0 #000}
.qg-tab[aria-pressed="true"] .qg-count{color:#03200f;text-shadow:none}
.qg-tab:hover,.qg-key:hover{filter:brightness(1.12)}
.qg-tab:active,.qg-key:active{transform:translateY(1px)}
.qg-foot{display:grid;gap:14px;margin-top:auto}
.qg-foot p{color:var(--qg-cream);font:600 clamp(14px,6.2cqi,17px)/1.5 var(--qg-text)}
/* a short window packs the rail closer; one too short for the whole rail lets it scroll away with the page */
@media (min-width:900px) and (max-height:820px){.qg-rail{gap:12px;padding-top:12px;padding-bottom:12px}.qg-h1{margin-bottom:10px}.qg-tabs{margin-top:12px;gap:8px}.qg-tab{min-height:50px}}
@media (min-width:900px) and (max-height:640px){.qg-rail{position:static;height:auto;overflow:visible}}

/* ---------------------------------------------------------------- keys */
/* every key's padding clears the width its 9-slice frame is drawn at, so no label runs onto the frame */
.qg-key{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;margin:0;padding:5px 11px 9px;
 border:0 solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/key-dark.webp) 40 46 50 fill/8px 9px 11px stretch;background:none;
 color:var(--qg-green);font:600 14px/1.1 var(--qg-face);letter-spacing:.05em;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.qg-key--orange{border-image:url(/runtime/quit/deck-art/key-orange.webp) 22 24 34 fill/8px 9px 11px stretch;color:#1d0800}
.qg-key--orange:active{border-image-source:url(/runtime/quit/deck-art/key-orange-down.webp)}
.qg-key[aria-pressed="true"]{border-image:url(/runtime/quit/deck-art/key-green.webp) 22 24 34 fill/8px 9px 11px stretch;color:#03200f}
.qg-partner{min-height:60px;padding:8px 10px 11px;font-size:clamp(16px,7.2cqi,21px);letter-spacing:.06em}

/* ---------------------------------------------------------------- the wall: dark CRT glass in the deck's frame */
.qg-wall{--qg-col:clamp(190px,13.5vw,250px);display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--qg-col),1fr));gap:12px;align-items:start;
 min-width:0;margin:0;padding:12px;list-style:none;border:12px solid transparent;border-image:var(--qg-deck);
 background:repeating-linear-gradient(0deg,rgba(0,238,131,.03) 0 1px,transparent 1px 3px),#020906;background-clip:padding-box;
 box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
/* gallery.js lays the wall out as a masonry: 4 px rows, each card spanning its own height and the gap below it */
.qg-wall[data-qg-masonry]{grid-auto-rows:4px;row-gap:0}
.qg-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:3px 3px 5px;border:9px solid transparent;border-image:var(--qg-bay)}
.qg-screen{position:relative;overflow:hidden;border:1px solid #0b120e;background:#000}
.qg-screen img{display:block;width:100%;height:auto}
/* a reel is shown whole, 9:16, as its poster and as its web copy */
.qg-card--reel .qg-screen{aspect-ratio:9/16}
.qg-card--reel .qg-screen img,.qg-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.qg-screen video{z-index:1;display:block}
.qg-tag{position:absolute;z-index:2;top:7px;left:7px;padding:4px 7px 3px;border:2px solid var(--qg-green);background:rgba(2,10,6,.9);
 color:var(--qg-green);font:600 12px/1 var(--qg-face);letter-spacing:.08em;pointer-events:none}
.qg-tag--meme{border-color:var(--qg-orange);color:var(--qg-orange)}
.qg-name{min-height:2.6em;color:var(--qg-cream);font:600 12.5px/1.3 var(--qg-face);letter-spacing:.02em;overflow-wrap:break-word}
.qg-keys{display:flex;flex-wrap:wrap;gap:6px}
.qg-keys .qg-key{flex:1 1 4.6em}
.qg-keys .qg-key--orange{flex:1.4 1 6.8em}
/* a meme's words can run along any edge, so its tag waits beside DOWNLOAD instead of on the picture; a card too narrow
   for both on one line (two columns at 320 px) puts DOWNLOAD, whole width, under the tag, as a reel stacks its keys */
.qg-card--meme .qg-keys{align-items:center}
.qg-card--meme .qg-tag{position:static;flex:none;padding:6px 7px 5px}
.qg-card--meme .qg-keys .qg-key{flex:1 1 6.8em}

/* ---------------------------------------------------------------- narrower screens: the rail's top over the wall */
@media (max-width:899px){
 .qg{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 8px 24px}
 .qg-rail{display:contents}
 .qg-head,.qg-foot{padding:12px 12px 14px;border:12px solid transparent;border-image:var(--qg-deck);border-image-width:16px;background:#010805;background-clip:padding-box;container-type:inline-size}
 .qg-head{order:0}
 .qg-wall{order:1;--qg-col:200px}
 .qg-foot{order:2;margin:0}
 .qg-h1{margin-bottom:10px;font-size:clamp(26px,9.4cqi,44px)}
 .qg-h1 span{display:inline}
 .qg-lead,.qg-foot p{font-size:clamp(14px,4.2cqi,17px)}
 .qg-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:14px;padding:0;border:0}
 .qg .qg-tab{justify-content:center;gap:5px;min-height:50px;padding:5px 9px 9px;border-image-width:7px 8px 10px;font-size:clamp(11px,4.2cqi,17px);letter-spacing:.02em}
 .qg-count{font-size:clamp(20px,7.6cqi,32px)}
 .qg-partner{font-size:clamp(15px,5cqi,20px)}
}
@media (max-width:599px){
 .qg-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:6px;border-image-width:16px}
 .qg-card{gap:6px;padding:2px 2px 4px;border-width:8px;border-image-width:10px}
 .qg-tag{top:5px;left:5px;padding:3px 5px 2px;font-size:10px}
 .qg-card--meme .qg-tag{padding:5px 5px 4px}
 .qg-name{font-size:11px}
 .qg .qg-key{min-height:44px;padding:4px 8px 8px;border-image-width:6px 7px 9px;font-size:11px;letter-spacing:.03em}
}
@media (prefers-reduced-motion:reduce){.qg-tab:active,.qg-key:active{transform:none}}