/*
 * Quick view (handoff addendum 02), on a member's portfolio and on /work/ and directory profiles.
 * quickview.js builds a <dialog id="pcw-pfq"> with a top bar; the server sends its two columns.
 *
 * On a portfolio the theme's tokens come from the page (.t-clean / .t-editorial / .t-bold on body),
 * and the work column reuses the item page's classes from public.css. On the ProCopywriters site
 * (#pcw-pfq.qv-site, and the cards under #pcw-ws) the same tokens are set to the site's brand here,
 * and everything is under an id: the site's stylesheets are global.
 */

/* ---------- the card's Quick view button ---------- */
.cd-m[data-qv] .qvb,#pcw-ws .rc-m[data-qv] .qvb{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;margin:0;
	background:var(--pc-bg);color:var(--pc-text);border:var(--bw) solid var(--pc-rule);border-radius:var(--r);font:600 13px/1.2 var(--pc-body-font);padding:7px 11px;cursor:pointer;
	opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;box-shadow:0 2px 10px rgba(0,0,0,.14);text-transform:none;letter-spacing:0;width:auto;height:auto}
.qvb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
.t-bold .cd-m[data-qv] .qvb{border-color:var(--pc-text);box-shadow:3px 3px 0 var(--acc);text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.cd:hover .qvb,#pcw-ws .rc:hover .qvb,.qvb:focus-visible{opacity:1!important;transform:none!important}
.qvb:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media (hover:none){.cd-m[data-qv] .qvb,#pcw-ws .rc-m[data-qv] .qvb{opacity:1;transform:none}}
@media (max-width:699px){.cd-m[data-qv] .qvb,#pcw-ws .rc-m[data-qv] .qvb{opacity:1;transform:none;padding:7px}.qvb span{display:none}}
/* No script (or a share link, which has no quick view): no button */
html:not(.qv-on) .qvb{display:none!important}
/* With the script running, the image opens the quick view too (above the card's stretched title link). */
html.qv-on .cd-m[data-qv],html.qv-on #pcw-ws .rc-m[data-qv]{z-index:2;cursor:pointer}
/* On touch screens a tap on the card opens the piece, as people expect (Leif, 2026-10-20): the image drops
   back under the title link, and only the eye button (z-index 3, above that link) opens the quick view. */
@media (hover:none){html.qv-on .cd-m[data-qv],html.qv-on #pcw-ws .rc-m[data-qv]{z-index:auto;cursor:auto}}
/* The site's tokens for the cards on /work/ and directory profiles */
#pcw-ws{--pc-bg:#FFFFFF;--pc-text:#2E3A42;--pc-muted:#5B666E;--pc-rule:#E3E4E6;--pc-surface:#F5F5F6;--pc-card:#FFFFFF;--pc-body-font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--r:2px;--bw:1px;--acc:#009EDC}

/* ---------- the dialog ---------- */
html.pfq-open{overflow:hidden}
#pcw-pfq.qv-site{--pc-bg:#FFFFFF;--pc-text:#2E3A42;--pc-muted:#5B666E;--pc-rule:#E3E4E6;--pc-surface:#F5F5F6;--pc-card:#FFFFFF;--acc:#00739F;--on-acc:#FFFFFF;
	--pc-heading-font:'Playfair Display',Georgia,serif;--pc-body-font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--r:2px;--bw:1px}
#pcw-pfq{position:fixed;inset:0;margin:auto;padding:0;border:0;width:calc(100vw - 56px);max-width:1060px;height:fit-content;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);
	display:none;flex-direction:column;overflow:hidden;background:var(--pc-bg);color:var(--pc-text);font-family:var(--pc-body-font);font-size:16px;line-height:1.55;text-align:left;
	border-radius:max(var(--r),4px);box-shadow:0 24px 70px rgba(0,0,0,.4)}
/* A flex column, not a grid: Safari does not shrink a grid row to a max-height, so the panel was clipped instead of scrolling */
#pcw-pfq[open]{display:flex}
#pcw-pfq > .qv-top{flex:none}
#pcw-pfq *,#pcw-pfq *::before,#pcw-pfq *::after{box-sizing:border-box}
#pcw-pfq::backdrop{background:rgba(14,18,22,.62)}
@media (prefers-reduced-motion:no-preference){
	#pcw-pfq[open]{animation:qvu .2s ease-out}
	#pcw-pfq[open]::backdrop{animation:qvf .16s ease-out}
}
@keyframes qvf{from{opacity:0}to{opacity:1}}
@keyframes qvu{from{transform:translateY(24px)}to{transform:none}}
.t-bold #pcw-pfq{border:2px solid var(--pc-text);border-radius:0;box-shadow:10px 10px 0 var(--acc)}

/* top bar */
#pcw-pfq .qv-top{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--pc-rule)}
#pcw-pfq .qv-n{margin-right:auto;font-size:13px;font-weight:600;color:var(--pc-muted);font-variant-numeric:tabular-nums}
/* Whose work this is (on /work/ and profiles the arrows stay with one writer) */
#pcw-pfq .qv-lead-t{margin-right:auto;display:flex;align-items:center;gap:10px;min-width:0}
#pcw-pfq .qv-lead-t .qv-n{margin-right:0;flex:none}
#pcw-pfq .qv-who{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--pc-text)}
#pcw-pfq .qv-who b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-pfq .qv-who[hidden]{display:none}
#pcw-pfq .qv-who:not([hidden]) + .qv-n::before{content:'· ';color:var(--pc-muted)}
#pcw-pfq .qv-wav{width:28px;height:28px;flex:none;border-radius:50%;object-fit:cover;background:var(--wa,var(--acc));color:var(--wo,#fff);display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--pc-body-font)}
#pcw-pfq .qv-all{align-self:center;font-size:14px;font-weight:600;color:var(--pc-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc);padding:4px 0}
#pcw-pfq .qv-hd{display:none}
#pcw-pfq .qv-ib{all:unset;box-sizing:border-box;width:38px;height:38px;flex:none;border:var(--bw) solid var(--pc-rule);background:var(--pc-bg);color:var(--pc-text);border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--pc-body-font)}
#pcw-pfq .qv-ib:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
#pcw-pfq .qv-ib:disabled{opacity:.3;cursor:default}
#pcw-pfq .qv-ib:focus-visible,#pcw-pfq a:focus-visible,#pcw-pfq button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* body: the work, and the details; each column scrolls on its own */
#pcw-pfq .qv-c{flex:1 1 auto;min-height:0;display:flex}
#pcw-pfq .qv-wait{padding:48px 28px;margin:0;color:var(--pc-muted)}
#pcw-pfq .qv-b{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr);min-height:0}
#pcw-pfq .qv-w{overflow:auto;padding:28px;background:var(--pc-surface);min-width:0}
#pcw-pfq .qv-w .work-box,#pcw-pfq .qv-w .work-email{margin:0}
#pcw-pfq .qv-w .blocks,#pcw-pfq .qv-w .ann{background:var(--pc-bg);padding:4px 20px}
#pcw-pfq .qv-w .brief{background:var(--pc-bg)}
#pcw-pfq .qv-w .lockg{margin:0;background:var(--pc-bg)}
#pcw-pfq .qv-cs{background:var(--pc-bg);padding:20px 22px;border-radius:var(--r)}
.t-bold #pcw-pfq .qv-cs{border:2px solid var(--pc-text)}
#pcw-pfq .qv-cs h3{margin:0 0 6px;font:700 17px/1.3 var(--pc-heading-font);color:var(--pc-text)}
#pcw-pfq .qv-cs p{margin:0 0 18px;font-size:15.5px;line-height:1.6}
#pcw-pfq .qv-cs .qv-more{margin:0;font-size:13.5px;color:var(--pc-muted)}
#pcw-pfq .qv-cs .qv-figs{font-size:15px;color:var(--pc-muted)}
#pcw-pfq .qv-cs .qv-figs b{color:var(--pc-text);font-weight:800}
#pcw-pfq .qv-w .cs-stats{margin:0 0 16px;border-top:0;padding-top:0}

/* Words first (addendum 03): strip → highlight → reading panel, each left out when empty */
#pcw-pfq .qv-strip{height:112px;margin:0 0 20px;background:var(--pc-bg);border:1px solid var(--pc-rule);border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:16px;overflow:hidden;padding:12px 18px}
.t-editorial #pcw-pfq .qv-strip{background:transparent;border:0;border-bottom:1px solid var(--pc-rule);border-radius:0}
.t-bold #pcw-pfq .qv-strip{border:2px solid var(--pc-text)}
#pcw-pfq .qv-strip img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#pcw-pfq .qv-strip.k-logo img{max-height:56px;max-width:70%}
#pcw-pfq .qs-wm{font:800 30px/1.1 var(--pc-body-font);color:var(--pc-muted);opacity:.85;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#pcw-pfq .qv-strip.k-logo img + .qs-wm{display:none}
#pcw-pfq .qv-strip.k-img img{height:100%;width:auto;aspect-ratio:16/10;object-fit:cover;border-radius:calc(var(--r) * .5)}
#pcw-pfq .qv-strip.k-doc,#pcw-pfq .qv-strip.k-media,#pcw-pfq .qv-strip.k-multi{justify-content:flex-start}
#pcw-pfq .qs-t{display:flex;flex-direction:column;gap:3px;min-width:0}
#pcw-pfq .qs-t b{font-size:15.5px;font-weight:700;color:var(--pc-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-pfq .qs-t span{font-size:13.5px;color:var(--pc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-pfq .qs-pg{flex:none;width:58px;height:78px;background:#fff;border:1px solid var(--pc-rule);box-shadow:0 2px 6px rgba(0,0,0,.08);padding:9px 8px;display:flex;flex-direction:column;gap:5px;overflow:hidden;position:relative}
#pcw-pfq .qs-pg img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);max-height:none;object-fit:contain;object-position:center} /* contain: some "page" previews are really a logo, and cover cropped it */
#pcw-pfq .qs-pg i,#pcw-pfq .qs-pgs i::before{display:block;height:3px;background:#D5D9DD;border-radius:2px}
#pcw-pfq .qs-pg i:first-child{width:70%;height:5px;background:#9AA3AB}
#pcw-pfq .qs-pg i:last-child{width:60%}
#pcw-pfq .qs-pl{flex:none;width:44px;height:44px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center}
#pcw-pfq .qs-pl::after{content:"";border-left:13px solid var(--on-acc,#fff);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
#pcw-pfq .qs-pgs{flex:none;display:flex;gap:5px}
#pcw-pfq .qs-pgs i{width:30px;height:40px;background:#fff;border:1px solid var(--pc-rule);box-shadow:0 1px 4px rgba(0,0,0,.08);padding:6px 5px}
#pcw-pfq .qs-pgs i::before{content:"";box-shadow:0 7px 0 #D5D9DD,0 14px 0 #D5D9DD}

/* The highlight, as a pull quote. The stored text has its quote marks taken off. */
#pcw-pfq .qv-hl{margin:0 0 20px;padding:2px 0 2px 18px;border-left:3px solid var(--acc);font:600 22px/1.32 var(--pc-heading-font);color:var(--pc-text);text-wrap:balance}
.t-editorial #pcw-pfq .qv-hl{border-left:0;border-top:1px solid var(--pc-rule);border-bottom:1px solid var(--pc-rule);padding:18px 0;font-weight:400;font-size:25px;line-height:1.3;text-align:center}
.t-editorial #pcw-pfq .qv-hl::before{content:"“";display:block;font-size:46px;line-height:.6;height:22px;color:var(--acc)}
.t-bold #pcw-pfq .qv-hl{border-left-width:6px;text-transform:uppercase;font-weight:900;font-size:21px;line-height:1.12}

/* The reading panel: "From the piece", whole paragraphs, a fade and the way to the rest when it's cut */
#pcw-pfq .qv-read{background:var(--pc-bg);padding:16px 22px 18px;border-radius:var(--r);color:var(--pc-text)}
.t-bold #pcw-pfq .qv-read{border:2px solid var(--pc-text)}
#pcw-pfq .qv-rh{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted);padding:0 0 9px;margin:0 0 14px;border-bottom:1px solid var(--pc-rule)}
#pcw-pfq .qv-rb{font-size:15.5px;line-height:1.68;max-width:62ch}
#pcw-pfq .qv-rb p{margin:0 0 14px;text-wrap:pretty}
#pcw-pfq .qv-rb p:last-child{margin-bottom:0}
.t-editorial #pcw-pfq .qv-rb{font-family:var(--pc-heading-font);font-size:17.5px;line-height:1.7}
.t-editorial #pcw-pfq .qv-rb p:first-child::first-letter{float:left;font-size:50px;line-height:.9;padding:4px 8px 0 0;color:var(--acc);font-weight:600}
#pcw-pfq .qv-read.cut .qv-rb{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 110px),transparent)}
#pcw-pfq .qv-rest{position:relative;display:inline-block;margin-top:-28px;font-weight:700;font-size:14.5px;color:var(--acc);text-decoration:none}
#pcw-pfq .qv-rest:hover{text-decoration:underline;text-underline-offset:3px}

/* The client's words: the fallback when there's no copy, and a case study's lead */
#pcw-pfq .qv-quote{margin:0 0 18px;background:var(--pc-bg);padding:22px 26px;border-radius:var(--r)}
.t-bold #pcw-pfq .qv-quote{border:2px solid var(--pc-text)}
#pcw-pfq .qv-quote blockquote{margin:0;padding:0;border:0;font:600 21px/1.4 var(--pc-heading-font);color:var(--pc-text);text-wrap:pretty}
.t-editorial #pcw-pfq .qv-quote blockquote{font-weight:400}
.t-bold #pcw-pfq .qv-quote blockquote{text-transform:uppercase;font-weight:900;font-size:19px;line-height:1.2}
#pcw-pfq .qv-quote figcaption,#pcw-pfq .qv-lead figcaption{margin-top:10px;font-size:14px;color:var(--pc-muted)}
#pcw-pfq .qv-quote figcaption::before,#pcw-pfq .qv-lead figcaption::before{content:"— "}
#pcw-pfq .qv-lead{margin:0 0 20px;background:var(--pc-bg);padding:20px 24px 22px;border-radius:var(--r);border-top:4px solid var(--acc)}
#pcw-pfq .qv-lead .qm{display:block;font:700 48px/.6 var(--pc-heading-font);color:var(--acc);height:22px}
#pcw-pfq .qv-lead blockquote{margin:0;padding:0;border:0;font:600 23px/1.32 var(--pc-heading-font);color:var(--pc-text);text-wrap:balance}
.t-editorial #pcw-pfq .qv-lead{border-top:0}
.t-editorial #pcw-pfq .qv-lead blockquote{font-weight:400;font-size:25px}
.t-bold #pcw-pfq .qv-lead{border-top:0;background:var(--pc-text);box-shadow:6px 6px 0 var(--acc)}
.t-bold #pcw-pfq .qv-lead blockquote{color:var(--pc-bg);text-transform:uppercase;font-weight:900;font-size:21px;line-height:1.15}
.t-bold #pcw-pfq .qv-lead figcaption{color:var(--pc-bg);opacity:.8}
/* A case study's client, at the top of the quick view */
#pcw-pfq .qv-cl{margin:0 0 16px;font:700 20px/1.25 var(--pc-heading-font);color:var(--pc-text)}
#pcw-pfq .qv-cl span{display:block;margin:0 0 3px;font:700 11px/1.2 var(--pc-body-font);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted)}
.t-bold #pcw-pfq .qv-cl{text-transform:uppercase;font-weight:900}
#pcw-pfq .qv-res{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--pc-rule)}
#pcw-pfq .qv-res span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin:0 0 4px}
#pcw-pfq .qv-res p{margin:0;font:700 22px/1.25 var(--pc-heading-font);color:var(--pc-text);text-wrap:balance}
.t-bold #pcw-pfq .qv-res p{text-transform:uppercase;font-weight:900;font-size:20px}
@media (max-width:699px){#pcw-pfq .qv-strip{height:88px}#pcw-pfq .qv-read{padding:14px 16px 16px}#pcw-pfq .qv-hl{font-size:20px}.t-editorial #pcw-pfq .qv-hl{font-size:22px}}
/* On a phone a picture in the strip is too small to see (Leif, 2026-10-21); with PCW_PF_Render::QV_PICTURES off they're not drawn at all */
@media (max-width:699px){#pcw-pfq .qv-strip.k-img,#pcw-pfq .qv-strip.k-logo{display:none}}
#pcw-pfq .qv-s{overflow:auto;padding:26px 24px 20px;border-left:1px solid var(--pc-rule);display:flex;flex-direction:column;gap:12px;min-width:0}
#pcw-pfq .qv-s h2{margin:0;font:700 26px/1.15 var(--pc-heading-font);letter-spacing:-.01em;text-wrap:balance;color:var(--pc-text);text-transform:none}
.t-editorial #pcw-pfq .qv-s h2{font-weight:600}
.t-bold #pcw-pfq .qv-s h2{text-transform:uppercase;font-weight:900;font-size:23px}
#pcw-pfq .qv-l{margin:0;font-size:15.5px;line-height:1.55;color:var(--pc-muted)}
#pcw-pfq .qv-m{margin:4px 0 0;border-top:1px solid var(--pc-rule)}
#pcw-pfq .qv-m div{padding:9px 0;border-bottom:1px solid var(--pc-rule)}
#pcw-pfq .qv-m dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted);margin:0}
#pcw-pfq .qv-m dd{margin:2px 0 0;font-size:14.5px;line-height:1.45}
#pcw-pfq .qv-tg{display:flex;flex-wrap:wrap;gap:6px}
#pcw-pfq .qv-a{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px}
#pcw-pfq .qv-a .pbtn{justify-content:center;text-align:center;width:100%}
#pcw-pfq .qv-k{font-size:12px;color:var(--pc-muted);text-align:center;margin-top:2px}
@media (max-width:860px){#pcw-pfq .qv-b{grid-template-columns:minmax(0,1fr) 280px}}

/* ---------- on the ProCopywriters site: the classes a portfolio page gets from public.css ---------- */
#pcw-pfq.qv-site .kd{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
#pcw-pfq.qv-site .tg{font-size:12px;font-weight:600;line-height:1.2;padding:4px 9px;border-radius:999px;background:var(--pc-surface);color:var(--pc-text)}
#pcw-pfq.qv-site .pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font:700 15px/1.2 var(--pc-body-font);text-decoration:none;border-radius:var(--r);border:1.5px solid var(--pc-text);background:var(--pc-text);color:#fff}
#pcw-pfq.qv-site .pbtn:hover{background:#26313a;color:#fff}
#pcw-pfq.qv-site .pbtn.sec{background:transparent;color:var(--pc-text)}
#pcw-pfq.qv-site .pbtn.sec:hover{background:var(--pc-text);color:#fff}
#pcw-pfq.qv-site .pfq-m{background:var(--pc-bg);display:flex;align-items:center;justify-content:center;min-height:240px;border:1px solid var(--pc-rule)}
#pcw-pfq.qv-site .pfq-m img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain}
#pcw-pfq.qv-site .pfq-ph{align-self:stretch;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:28px}
#pcw-pfq.qv-site .pfq-ph span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
#pcw-pfq.qv-site .pfq-ph b{font:700 clamp(26px,3vw,36px)/1.12 var(--pc-heading-font);overflow-wrap:anywhere}
#pcw-pfq.qv-site .pfq-ph b::before{content:"";display:block;width:40px;height:3px;background:#009EDC;margin-bottom:14px}
#pcw-pfq.qv-site .pfq-taste{margin-top:18px;background:var(--pc-bg);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
#pcw-pfq.qv-site .pfq-taste p{margin:0}
#pcw-pfq.qv-site blockquote{margin:0;padding:2px 0 2px 16px;border-left:3px solid #009EDC;font:400 17px/1.5 var(--pc-heading-font);color:var(--pc-text)}
#pcw-pfq.qv-site .pfq-em{display:flex;flex-direction:column;gap:2px;font-size:14.5px}
#pcw-pfq.qv-site .pfq-em span{color:var(--pc-muted)}
#pcw-pfq.qv-site .pfq-st{display:flex;flex-wrap:wrap;gap:12px 26px}
#pcw-pfq.qv-site .pfq-st b{display:block;font:700 30px/1 var(--pc-heading-font)}
#pcw-pfq.qv-site .pfq-st span{display:block;font-size:12.5px;color:var(--pc-muted);margin-top:4px}
#pcw-pfq.qv-site .pfq-l{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted);margin-bottom:2px}
#pcw-pfq.qv-site .pfq-parts{margin:0;padding-left:20px;font-size:14.5px}
#pcw-pfq.qv-site .pfq-who{display:flex;align-items:center;gap:10px;font-size:14px;margin:0}
#pcw-pfq.qv-site .pfq-who img,#pcw-pfq.qv-site .pfq-who i{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover;background:var(--pc-text);color:#fff;font:700 12.5px/36px var(--pc-body-font);text-align:center;font-style:normal}
#pcw-pfq.qv-site .pfq-who small{display:block;color:var(--pc-muted);font-size:12.5px}

/* ---------- phones: a bottom sheet, one scroll, the actions stuck to the bottom ---------- */
@media (max-width:699px){
	/* Pinned to the bottom edge and sized to what the phone actually shows (dvh: not the area behind the browser bar).
	   Not margin:auto with fit-content: iOS sometimes left the sheet at its "Loading…" size when the piece arrived. */
	/* One height for every piece, so the arrows in the top bar stay under the thumb as people tap through
	   (Leif, 2026-10-28); a short piece leaves space above its actions, a long one scrolls. */
	#pcw-pfq{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;margin:0;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:16px 16px 0 0!important;box-shadow:0 -10px 40px rgba(0,0,0,.3)!important}
	.t-bold #pcw-pfq{border-width:2px 0 0}
	@media (prefers-reduced-motion:no-preference){#pcw-pfq[open]{animation:qvs .22s ease-out}}
	#pcw-pfq .qv-top{padding:18px 10px 10px 16px}
	#pcw-pfq .qv-hd{display:block;position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--pc-rule)}
	#pcw-pfq .qv-b{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow:auto;overscroll-behavior:contain}
	#pcw-pfq .qv-w,#pcw-pfq .qv-s{overflow:visible}
	#pcw-pfq .qv-w{padding:16px}
	#pcw-pfq .qv-s{border-left:0;padding:18px 16px 16px}
	#pcw-pfq .qv-s h2{font-size:22px}
	#pcw-pfq .qv-a{position:sticky;bottom:0;background:var(--pc-bg);margin:0 -16px -16px;padding:12px 16px max(16px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--pc-rule)}
	#pcw-pfq .qv-k{display:none}
}
@keyframes qvs{from{transform:translateY(100%)}to{transform:none}}
/* A case study's figures band in the directory's dialog (the portfolio's stylesheet isn't on site pages) */
#pcw-pfq.qv-site .cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--pc-rule)}
#pcw-pfq.qv-site .cs-stats b{display:block;font:700 34px/1 var(--pc-heading-font);color:var(--pc-text)}
#pcw-pfq.qv-site .cs-stats span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--pc-muted)}
/* A label from an old extract ("The Challenge"), between paragraphs of the teaser */
#pcw-pfq .qv-rb .qv-lbl{margin:20px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc-muted);font-family:var(--pc-body-font)}
#pcw-pfq .qv-rb .qv-lbl::first-letter{float:none;font-size:inherit;padding:0;color:inherit}
/* Waiting for the next piece: the last one stays, dimmed, so the panel doesn't collapse and grow again */
#pcw-pfq .qv-c.qv-busy{opacity:.45;transition:opacity .12s .08s;pointer-events:none}