/* THE QUITTERS (/memes), the AI influencer crew. The floor sits in the site's own riveted steel bezel
   (.q-extra__panel, runtime/quit/pages-art/strip.png, cut from the approved FAQ frame) and so does every card; the
   active tab is the approved orange plate (pages-art/plate.png). Orange Silkscreen title with its hard shadow, VT323
   body, colours from the QUIT tokens (runtime/components/tokens.css). No images of its own besides the crew's media. */
.qc{background:var(--t-black,#030805);color:var(--t-ink,#f4e7cb)}
.qc .qc-floor{padding-top:clamp(12px,2vw,30px);padding-bottom:clamp(18px,3vw,40px)}
.qc .qc-panel{max-width:1420px;padding:clamp(16px,2vw,30px) clamp(12px,2.2vw,32px) clamp(20px,2.4vw,34px)}

/* The title band: heading and tabs on one line, the AI line under them, never hidden. */
.qc-band{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px clamp(18px,2.4vw,36px);margin:0 0 clamp(18px,2vw,28px)}
.qc-title{margin:0;color:var(--t-orange,#ff610b);font:700 clamp(36px,4.6vw,66px)/.95 var(--t-font-display);letter-spacing:-.045em;text-shadow:3px 4px 0 #4a2010;white-space:nowrap}
.qc-tabs{display:flex;flex-wrap:wrap;gap:10px 12px}
.qc-tab{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0;padding:6px 18px 4px;border:3px solid var(--t-green,#25dc71);border-radius:3px;background:#03100a;color:var(--t-green,#25dc71);font:400 26px/1 var(--t-font-body);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 0 2px #06251a,2px 3px 0 #020504;transition:filter .12s ease-out}
.qc-tab:hover{filter:brightness(1.15)}
.qc-tab[aria-pressed="true"]{padding:0 18px;border-style:solid;border-width:8px 7px;border-image:url(/runtime/quit/pages-art/plate.png) 14 12 fill / 8px 7px stretch;border-radius:0;background:#fb5f17 padding-box;color:#140b04;box-shadow:none}
.qc-tab:focus-visible{outline:var(--t-focus-width,3px) solid var(--t-focus,#fff0ad);outline-offset:3px}
.qc-ai{grid-column:1/-1;margin:0;padding:10px 0 0;border-top:2px solid #1c2a20;color:var(--t-ink,#f4e7cb);font:400 clamp(23px,1.9vw,28px)/1.15 var(--t-font-body)}
.qc-intro{grid-column:1/-1;margin:0;max-width:62ch;color:var(--t-muted,#b5bba9);font:400 clamp(21px,1.6vw,24px)/1.2 var(--t-font-body)}

/* The divider above the cards: the story in one title and one line (owner order, 16 Oct: Before and After buying $QUIT). */
.qc-divider{display:grid;gap:6px;margin:0 0 clamp(16px,1.8vw,24px);padding:12px 0 14px;border-top:3px solid #fb5f17;border-bottom:2px solid #1c2a20;text-align:left}
.qc-divider__title{margin:0;color:var(--t-orange,#ff610b);font:700 clamp(22px,2.4vw,34px)/1 var(--t-font-display);letter-spacing:-.02em;text-shadow:2px 3px 0 #4a2010}
.qc-divider__line{margin:0;max-width:70ch;color:var(--t-ink,#f4e7cb);font:400 clamp(20px,1.6vw,24px)/1.2 var(--t-font-body)}

/* The cards: each one a small bezel holding a name plate, the vertical tile, the stamp across the tile, the line and
   the platforms as account links. */
.qc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,252px),1fr));gap:clamp(14px,1.6vw,24px);margin:0;padding:0;list-style:none}
.qc-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-content:start;row-gap:10px;min-width:0;padding:12px 12px 14px;border-style:solid;border-width:10px 16px;border-image:url(/runtime/quit/pages-art/strip.png) 26 46 fill / 10px 16px stretch;filter:drop-shadow(3px 5px 0 #020504)}
.qc-card[hidden],.qc-divider[hidden]{display:none}
.qc-card__name{grid-row:1;margin:0;color:var(--t-ink,#f4e7cb);font:700 clamp(19px,1.45vw,23px)/1.05 var(--t-font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.qc-card__open{grid-row:2;grid-column:1;display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qc-card__open::after{content:"";position:absolute;inset:-10px -16px;z-index:3}
.qc-card__open:focus-visible{outline:none}
.qc-card__open:focus-visible .qc-media{outline:var(--t-focus-width,3px) solid var(--t-focus,#fff0ad);outline-offset:3px}
.qc-media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:#020604;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #17201a}
.qc-media__el{display:block;width:100%;height:100%;object-fit:cover;background:#020604}
.qc-media__hint{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-style:solid;border-width:6px 6px;border-image:url(/runtime/quit/pages-art/plate.png) 14 12 fill / 6px 6px stretch;background:#fb5f17 padding-box;color:#140b04;font:700 12px/1 var(--t-font-display);letter-spacing:.05em;white-space:nowrap}
.qc-card:hover .qc-media{box-shadow:0 0 0 2px #000,inset 0 0 0 2px #17201a,0 0 0 4px #1d8a4a}
.qc-card__stamp{grid-row:2;grid-column:1;align-self:start;justify-self:end;z-index:2;margin:14px 10px 0 0;padding:6px 9px 4px;border:3px double var(--t-red,#ff6860);background:#030805e0;color:var(--t-red,#ff6860);font:700 clamp(13px,1vw,15px)/1.05 var(--t-font-display);letter-spacing:.03em;text-align:center;transform:rotate(-6deg);pointer-events:none}
.qc-card__line{grid-row:3;margin:0;color:var(--t-ink,#f4e7cb);font:400 clamp(21px,1.6vw,24px)/1.1 var(--t-font-body)}
.qc-card__foot{grid-row:4;align-self:end;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:2px 0 0;padding:8px 0 0;border-top:2px solid #1c2a20}
.qc-card__ai{margin:0;color:var(--t-muted,#b5bba9);font:400 19px/1.1 var(--t-font-body);letter-spacing:.08em;text-transform:uppercase}
.qc-card__platforms{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;list-style:none;color:var(--t-green,#25dc71);font:400 20px/1.1 var(--t-font-body);letter-spacing:.06em;text-transform:uppercase}
.qc-card__platforms li{padding:0 10px}
.qc-card__platforms li:first-child{padding-left:0}
.qc-card__platforms li+li{border-left:2px solid #1d5f39}

/* The home page's floor 13 band: one row of four cards, each a link to /memes; two per row on phones. */
.qc-home{padding:clamp(12px,2vw,30px) clamp(8px,2vw,24px) 0}
.qc-home .qc-panel{margin:0 auto}
.qc-home .qc-grid--home{grid-template-columns:repeat(4,minmax(0,1fr))}
.qc-home .qc-card__name{font-size:clamp(16px,1.3vw,21px)}
@media (max-width:599px){.qc-home .qc-grid--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.qc-home .qc-card__line,.qc-home .qc-card__foot,.qc-home .qc-card__stamp{display:none}.qc-home .qc-card{padding:8px 6px 10px;border-width:8px 10px;border-image-width:8px 10px;row-gap:8px}.qc-home .qc-card__open::after{inset:-8px -10px}.qc-home .qc-card__name{font-size:13px;line-height:1.1;overflow-wrap:normal;word-break:normal;hyphens:none}}

/* The viewer: the site's modal, sized for a vertical video. */
.qc-viewer{width:min(560px,calc(100vw - 24px));max-width:none;padding:18px 18px 20px}
.qc-viewer__name{margin:0 6.5rem 14px 0;color:var(--t-orange,#ff610b);font:700 clamp(20px,2.4vw,28px)/1.05 var(--t-font-display);letter-spacing:-.02em;text-shadow:2px 3px 0 #4a2010}
.qc-viewer__stage{display:grid;place-items:center}
.qc-viewer__media{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 150px);margin:0 auto;border-radius:6px;background:#000;box-shadow:0 0 0 2px #000,inset 0 0 0 2px #17201a}

@media (max-width:860px){
  .qc-band{grid-template-columns:minmax(0,1fr)}
  .qc-title{white-space:normal}
  .qc-tab{min-height:42px;padding:5px 12px 3px;font-size:23px}
  .qc-tab[aria-pressed="true"]{padding:0 12px}
}
/* Phones: one column of cards. */
@media (max-width:599px){
  .qc .qc-floor{padding-left:8px;padding-right:8px}
  .qc .qc-panel{padding:14px 10px 18px}
  .qc-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .qc-card{border-width:10px 14px;border-image-width:10px 14px}
  .qc-card__open::after{inset:-10px -14px}
  .qc-card__name{font-size:22px}
  .qc-card__stamp{font-size:16px}
  .qc-viewer{padding:14px 12px 14px}
  .qc-viewer__media{max-height:calc(100dvh - 130px)}
}
@media (prefers-reduced-motion:reduce){.qc-tab{transition:none}}

.qc-card__platforms a{position:relative;z-index:4;color:inherit;text-decoration:underline;text-underline-offset:3px}
