/* FLOOR 25 / AFTER WORK, under the films and above BUY $QUIT IN 3 STEPS (tools/quit-site/after-work.mjs). Direction D1
   as the owner approved it on 30 Oct 2026: the D1 desktop and phone comps, with no holder line under the key. The words
   are live HTML over a text-free scene plate (runtime/quit/after-work-art/); the bezel is the hero monitor's
   (community-art/crt.webp), each plate the riveted bay (deck-art/bay.webp), the key the site's BUY key.

   Sizes are in the comps' own pixels through the section's width (container units): --a is one pixel of the 1746-wide
   desktop comp, --b one pixel of the 885-wide phone comp. The pixel face sets the headline, the readable display face the
   tag, labels, figures and key, the body face the caption and the lines (owner order, 25 Oct 2026). Colours are the
   comps': near-black, mint, safety orange, cream. */
.q-af{--af-black:#050806;--af-mint:#3ceb86;--af-orange:#ff6a13;--af-cream:#efe3c4;--af-shade:#2a0c02;
 --a:calc(100cqw / 1746);--b:calc(100cqw / 885);
 position:relative;container-type:inline-size;color:var(--af-cream);background:#050806;scroll-margin-top:var(--t-header-desktop,72px)}
.q-af *{box-sizing:border-box}
:where(.q-af) :is(h2,h3,p,ul,li){margin:0;padding:0}
.q-af ul{list-style:none}
.q-af-p,.q-af-br{display:none}

/* The floor (the comp's 1746 x 901): the screen (1272 x 901) on the left with the caption on its foot, the steel desk of
   plates and the key on the right. The screen keeps the comp's proportion; if the desk ever needs more height than the
   comp, the floor grows under it and the screen stays as it is. */
.q-af__floor{display:grid;grid-template-columns:minmax(0,1272fr) minmax(0,446fr);column-gap:calc(20 * var(--a));padding:0 calc(8 * var(--a)) 0 0;background:linear-gradient(180deg,#0d110e,#050806)}
.q-af__screen{grid-area:1/1;align-self:start;position:relative;isolation:isolate;aspect-ratio:1272/901;border-radius:calc(30 * var(--a));background:#000}
.q-af__screen::after{content:"";position:absolute;inset:0;z-index:2;border:calc(62 * var(--a)) solid transparent;border-image:url(/runtime/quit/community-art/crt.webp) 134 / calc(62 * var(--a)) stretch;pointer-events:none}
/* The plate is the comp's whole screen (1272 x 901), so it fills the screen behind the bezel as the comp has it. */
.q-af__scene{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;border-radius:calc(30 * var(--a))}
.q-af .q-af__scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* The headline over the sky, the tag under it (the comp's lines at 62, 45 and 66, 85; the tag at 57, 172). */
.q-af__head{position:absolute;z-index:3;left:calc(56 * var(--a));top:calc(26 * var(--a));right:calc(40 * var(--a))}
.q-af__title{font:700 calc(63 * var(--a))/1 var(--t-font-pixel,"QUIT Pixel",monospace);letter-spacing:0;
 --af-o:calc(3 * var(--a));--af-d:calc(6 * var(--a));
 text-shadow:calc(-1 * var(--af-o)) 0 0 var(--af-shade),var(--af-o) 0 0 var(--af-shade),0 calc(-1 * var(--af-o)) 0 var(--af-shade),0 var(--af-o) 0 var(--af-shade),calc(-1 * var(--af-o)) calc(-1 * var(--af-o)) 0 var(--af-shade),var(--af-o) calc(-1 * var(--af-o)) 0 var(--af-shade),calc(-1 * var(--af-o)) var(--af-o) 0 var(--af-shade),var(--af-o) var(--af-o) 0 var(--af-shade),var(--af-d) var(--af-d) 0 #140601}
.q-af__lead,.q-af__hot{display:block;width:max-content;max-width:100%}
.q-af__lead{color:var(--af-cream)}
.q-af__hot{margin-top:calc(-16 * var(--a));color:var(--af-orange);font-size:calc(94 * var(--a));line-height:1;--af-o:calc(4 * var(--a));--af-d:calc(8 * var(--a))}
.q-af__file{display:inline-block;margin-top:calc(4 * var(--a));padding:calc(10 * var(--a)) calc(14 * var(--a)) calc(9 * var(--a));border:calc(3 * var(--a)) solid var(--af-mint);border-radius:calc(6 * var(--a));background:rgba(4,9,6,.93);box-shadow:0 0 0 calc(2 * var(--a)) #050806;color:var(--af-mint);font:400 max(12px,calc(30 * var(--a)))/1 var(--t-font-display);letter-spacing:.04em;white-space:nowrap}

/* The caption bar on the screen's foot (the comp's 816 to 870, inside the bezel). */
.q-af__caption{grid-area:1/1;align-self:end;z-index:3;margin:0 calc(22 * var(--a)) calc(28 * var(--a));padding:calc(15 * var(--a)) calc(16 * var(--a)) calc(14 * var(--a));background:rgba(2,4,3,.94);color:var(--af-cream);font:400 max(12px,calc(26 * var(--a)))/1.25 var(--t-font-body);letter-spacing:0;text-align:center;text-wrap:balance}

/* The desk: five riveted plates and the key, in the screen's height (the comp's plates at 1305 to 1735). */
.q-af__desk{grid-area:1/2;display:flex;flex-direction:column;gap:calc(10 * var(--a));padding:calc(6 * var(--a)) 0 calc(10 * var(--a))}
.q-af__plates{flex:1;display:flex;flex-direction:column;gap:calc(6 * var(--a))}
.q-af__plate{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:calc(2 * var(--a)) calc(9 * var(--a));border:solid transparent;border-width:calc(12 * var(--a)) calc(14 * var(--a));border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill / calc(12 * var(--a)) calc(14 * var(--a)) stretch}
.q-af__label{color:var(--af-orange);font:400 max(12px,calc(30 * var(--a)))/1 var(--t-font-display);letter-spacing:.03em}
.q-af__value{margin-top:calc(6 * var(--a));color:var(--af-mint);font:400 calc(42 * var(--a))/1 var(--t-font-display-large,var(--t-font-display));letter-spacing:0;white-space:nowrap}
/* The comp sets the launchpad's long figure narrower to keep it on one line; here it is the same face a size down. */
.q-af__plate[data-af-plate="launchpad"] .q-af__value{font-size:calc(36 * var(--a))}
.q-af__line{margin-top:calc(6 * var(--a));color:var(--af-mint);font:400 max(12px,calc(23 * var(--a)))/1.12 var(--t-font-body);text-wrap:balance}
.q-af .c-btn.q-af__buy{display:flex;width:100%;min-height:calc(64 * var(--a));padding:0 calc(12 * var(--a));border-radius:0;font:700 calc(46 * var(--a))/1 var(--t-font-display-large,var(--t-font-display));letter-spacing:.03em;white-space:nowrap}

/* The floor's strip, as every floor ends. */
.q-af__strip{margin:0}

@media (prefers-reduced-motion:reduce){.q-af .c-btn.q-af__buy{transition:none}}

/* A narrow desktop: the plates' figures may wrap; the floor grows to hold them. */
@media (min-width:768px) and (max-width:1279px){
 .q-af__value{white-space:normal}
}

/* The phone composition (D1 phone r2), in the site's phone column: the screen with the headline over its sky, the
   caption under it, two rows of two plates, DIAMOND HANDS across, the key. */
@media (max-width:767px),(max-width:1199px) and (max-aspect-ratio:3/4),(pointer:coarse) and (max-height:500px){
 .q-af{scroll-margin-top:var(--t-header-phone,62px)}
 .q-af-d{display:none}
 .q-af-p{display:inline}
 .q-af-br{display:inline}
 .q-af__floor{display:flex;flex-direction:column;gap:calc(10 * var(--b));padding:calc(10 * var(--b)) calc(10 * var(--b)) calc(14 * var(--b))}
 .q-af__screen{align-self:stretch;aspect-ratio:865/870;border-radius:calc(26 * var(--b))}
 .q-af__screen::after{border-width:calc(52 * var(--b));border-image-width:calc(52 * var(--b))}
 .q-af__scene{inset:calc(8 * var(--b));border-radius:calc(22 * var(--b))}
 .q-af__head{left:calc(40 * var(--b));top:calc(36 * var(--b));right:calc(30 * var(--b))}
 .q-af__title{font-size:max(14px,calc(44 * var(--b)));--af-o:max(1px,calc(3 * var(--b)));--af-d:calc(6 * var(--b))}
 .q-af__hot{margin-top:calc(-6 * var(--b));font-size:calc(92 * var(--b));line-height:1;--af-o:max(1.5px,calc(4 * var(--b)));--af-d:calc(7 * var(--b))}
 .q-af__file{margin-top:calc(10 * var(--b));padding:calc(9 * var(--b)) calc(12 * var(--b)) calc(8 * var(--b));border-width:max(1.5px,calc(3 * var(--b)));font-size:max(12px,calc(31 * var(--b)))}
 .q-af__caption{margin:0;padding:calc(12 * var(--b)) calc(16 * var(--b));border:calc(3 * var(--b)) solid #26332b;border-radius:calc(10 * var(--b));background:#020403;font-size:max(12px,calc(32 * var(--b)));line-height:1.3}
 .q-af__desk{gap:calc(10 * var(--b));padding:0}
 .q-af__plates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(8 * var(--b))}
 .q-af__plate{justify-content:flex-start;padding:calc(4 * var(--b)) calc(8 * var(--b)) calc(6 * var(--b));border-width:calc(17 * var(--b)) calc(18 * var(--b));border-image-width:calc(17 * var(--b)) calc(18 * var(--b))}
 .q-af__plate[data-af-plate="diamond-hands"]{grid-column:1/-1}
 /* Once THE AIRDROP steps aside (runtime/quit/after-work.js), three plates are left: THE LOCK, last, takes the full row. */
 .q-af[data-af-airdrop] .q-af__plate[data-af-plate="lock"]{grid-column:1/-1}
 .q-af__label{font-size:max(12px,calc(36 * var(--b)))}
 .q-af__value{margin-top:calc(8 * var(--b));font-size:calc(62 * var(--b));white-space:nowrap}
 .q-af__plate[data-af-plate="launchpad"] .q-af__value{font-size:calc(62 * var(--b))}
 .q-af__line{margin-top:calc(8 * var(--b));font-size:max(12px,calc(33 * var(--b)));line-height:1.22;text-wrap:wrap}
 .q-af .c-btn.q-af__buy{min-height:max(48px,calc(92 * var(--b)));font-size:calc(56 * var(--b))}
}