/*
 * The portfolio directory (/work/), inside the site theme. ProCopywriters brand; each card carries
 * its member's accent. Everything is under #pcw-ws: the theme's stylesheets are global.
 * Ported from handoff/portfolio-v2/design/portfolio/Portfolio Directory.html.
 */
#pcw-ws{--charcoal:#2E3A42;--azure:#009EDC;--azure-d:#0286bd;--azure-t:#00739F;--azure-tint:rgba(0,158,220,.10);--card:#F5F5F6;--ink:#2E3A42;--muted:#5B666E;--muted-soft:#6B757C;--rule:#E3E4E6;
	--serif:'Playfair Display',Georgia,serif;--sans:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
	font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);text-align:left;background:#fff}
#pcw-ws *,#pcw-ws *::before,#pcw-ws *::after{box-sizing:border-box}
#pcw-ws h1,#pcw-ws h2,#pcw-ws h3{margin:0;letter-spacing:0;text-transform:none}
#pcw-ws p{margin:0}
#pcw-ws a{color:var(--azure-t)}
#pcw-ws img{max-width:100%}
#pcw-ws :focus-visible{outline:3px solid rgba(0,158,220,.55);outline-offset:2px}
#pcw-ws .ws-w{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:700px){#pcw-ws .ws-w{padding:0 40px}}
/* The ProCopywriters slate pattern (Leif, 2026-10-19), over the same charcoal so text keeps its contrast if it doesn't load */
#pcw-ws .hero{background:var(--charcoal) url(img/pattern-grey-lg.svg) center/cover no-repeat;color:#fff;padding:32px 0 28px;position:relative;overflow:hidden}
@media (min-width:700px){#pcw-ws .hero{padding:56px 0 44px}}
#pcw-ws .hero .kick{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.9;margin:0 0 10px}
#pcw-ws .hero h1{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.15;margin:0 0 10px;color:#fff;text-wrap:balance}
@media (min-width:700px){#pcw-ws .hero h1{font-size:44px}}
#pcw-ws .hero p{font-size:16px;line-height:1.55;margin:0 0 20px;max-width:620px;color:#fff}
#pcw-ws .crumb{font-size:13.5px;margin:0 0 10px}#pcw-ws .crumb a{color:#fff;font-weight:600}
#pcw-ws .sbox{display:flex;background:#fff;max-width:720px;box-shadow:0 6px 20px rgba(0,0,0,.18);margin:0}
#pcw-ws .sbox svg{width:20px;height:20px;stroke:var(--muted-soft);fill:none;stroke-width:2;margin:0 0 0 14px;align-self:center;flex:none}
#pcw-ws .sbox input{flex:1;min-width:0;border:0;padding:15px 12px;font:16px var(--sans);color:var(--ink);background:#fff;margin:0;height:auto;border-radius:0;box-shadow:none}
#pcw-ws .sbox input:focus{outline:none}
#pcw-ws .sbox:focus-within{outline:3px solid #9FD8F2}
#pcw-ws .sbox button{border:0;background:var(--azure);color:#fff;font:700 15px var(--sans);padding:0 22px;cursor:pointer;border-radius:0;text-transform:none;margin:0}
#pcw-ws .sbox button:hover{background:var(--azure-d)}
#pcw-ws .try{font-size:13.5px;margin:12px 0 0;color:#fff}
#pcw-ws .try a{color:#fff;font-weight:600;margin-left:8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
#pcw-ws .body{padding-top:22px;padding-bottom:48px}
#pcw-ws .facets{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
#pcw-ws .fr{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#pcw-ws .fr .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-soft);width:64px;flex:none}
@media (max-width:699px){#pcw-ws .fr .k{width:100%}}
#pcw-ws .chip{display:inline-block;font:600 13.5px var(--sans);padding:7px 13px;border-radius:999px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none}
#pcw-ws .chip:hover{border-color:var(--charcoal)}
#pcw-ws .chip.on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
#pcw-ws .chip .n{font-weight:400;color:var(--muted-soft);margin-left:4px}#pcw-ws .chip.on .n{color:#B9C3C9}
#pcw-ws .tglc{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;align-self:flex-start}
#pcw-ws .tglc .bx{width:17px;height:17px;border:1.5px solid #9AA3A9;border-radius:3px;display:inline-block;background:#fff}
#pcw-ws .tglc.on .bx{background:var(--azure);border-color:var(--azure);box-shadow:inset 0 0 0 3px #fff}
#pcw-ws .tglc img{height:16px;width:auto}
#pcw-ws .fchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
#pcw-ws .fchips .lbl2{font-size:13px;color:var(--muted)}
#pcw-ws .fchips .fx{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:var(--charcoal);color:#fff;font:600 13px var(--sans);padding:6px 12px;border-radius:999px;text-decoration:none}
#pcw-ws .fchips .fx::after{content:"×";font-size:15px;line-height:1;opacity:.8}
#pcw-ws .fchips > a:last-child{font-size:13.5px;font-weight:700}
#pcw-ws .rh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;border-top:1px solid var(--rule);padding-top:16px}
#pcw-ws .rh h2{font-family:var(--serif);font-weight:700;font-size:20px;margin:0;color:var(--ink)}
#pcw-ws .rh span{font-size:13.5px;color:var(--muted)}
#pcw-ws .rh a{font-size:14px;font-weight:700}
#pcw-ws .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:700px){#pcw-ws .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1040px){#pcw-ws .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#pcw-ws .rc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-top:4px solid var(--acc);transition:box-shadow .18s,transform .18s}
#pcw-ws .rc:hover{box-shadow:0 10px 28px rgba(20,40,60,.12);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){#pcw-ws .rc{transition:none}#pcw-ws .rc:hover{transform:none}}
#pcw-ws .rc:focus-within{outline:3px solid var(--azure);outline-offset:2px}
#pcw-ws .rc-m{position:relative;aspect-ratio:16/9;background:var(--card);overflow:hidden;display:flex;align-items:center;justify-content:center}
#pcw-ws .rc-m .cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pcw-ws .rc-m .cov.tall{object-fit:contain}
#pcw-ws .rc-m .cov.small{object-fit:scale-down}
#pcw-ws .rc-m .cov-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;filter:blur(20px) saturate(1.1);opacity:.55}
#pcw-ws .rc-m .ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#F2F3F4 0 12px,#EAECEE 12px 24px)}
#pcw-ws .rc-m .lbl{position:absolute;left:10px;bottom:10px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);background:#fff;padding:3px 6px}
#pcw-ws .rc-m .lbl:empty{display:none}
#pcw-ws .rc-m .cs{position:absolute;inset:0;background:#fff;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;gap:4px}
#pcw-ws .rc-m .cs .l{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t,var(--acc))}
#pcw-ws .rc-m .cs b{font:700 40px/1 'Playfair Display',Georgia,serif;color:var(--ink)}
#pcw-ws .rc-m .cs small{font-size:12.5px;color:#5B666E}
/* A case study with no picture and no figures (PCW_PF_Render::cs_story_card / cs_slim) */
#pcw-ws .rc-m .csw-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t,var(--acc))}
#pcw-ws .rc-m:has(> .csn){aspect-ratio:auto;height:72px}
#pcw-ws .rc-m .csn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 64px 0 18px;background:#fff;border-left:4px solid var(--acc)}
#pcw-ws .rc-m .csn span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-t,var(--acc))}
#pcw-ws .rc-m .csn b{font:700 18px/1.2 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-ws .rc-m .cs.named{justify-content:flex-end;gap:10px;padding-bottom:22px}
#pcw-ws .rc-m .cs .nm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 clamp(22px,2.4vw,30px)/1.12 'Playfair Display',Georgia,serif;overflow-wrap:anywhere}
#pcw-ws .rc-m .cs .nm::before{content:"";display:block;width:36px;height:3px;background:var(--acc);margin-bottom:12px}
#pcw-ws .rc-m .em{position:relative;width:70%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12);font-family:Arial,sans-serif;align-self:flex-end;margin-top:18px;height:calc(100% - 18px)}
#pcw-ws .rc-m .em i{display:block;height:6px;background:var(--acc)}
#pcw-ws .rc-m .em b{display:block;font:700 12px/1.25 Georgia,serif;padding:10px 12px 4px;color:#1b1b1b}
#pcw-ws .rc-m .em p{font-size:10px;line-height:1.45;padding:0 12px;margin:0;color:#333}
#pcw-ws .rc-m .so{position:absolute;inset:0;padding:14px 16px;font-size:13.5px;line-height:1.5;white-space:pre-line;color:var(--ink);background:#fff;overflow:hidden}
#pcw-ws .rc-m .dp{position:relative;width:40%;height:86%;align-self:flex-end;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:10px}
#pcw-ws .rc-m .dpi{position:relative;width:40%;align-self:flex-end;box-shadow:0 2px 8px rgba(0,0,0,.15);background:#fff}
#pcw-ws .rc-m .dp i,#pcw-ws .rc-m .mp div i{display:block;height:3px;background:#E2E2E2;margin-bottom:4px}
#pcw-ws .rc-m .mv{position:absolute;inset:0;background:#15181B;display:flex;align-items:center;justify-content:center}
#pcw-ws .rc-m .mv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
#pcw-ws .rc-m .mv span{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center}
#pcw-ws .rc-m .mv span::after{content:"";border-left:14px solid #15181B;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
#pcw-ws .rc-m .mp{position:absolute;inset:0;display:flex;gap:8px;padding:14px;align-items:center}
#pcw-ws .rc-m .mp div{flex:0 0 32%;aspect-ratio:3/4;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.14);padding:8px;position:relative;overflow:hidden}
#pcw-ws .rc-m .mp div img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pcw-ws .rc-m .kd{position:absolute;right:10px;top:10px;z-index:1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--charcoal);color:#fff;padding:3px 8px}
#pcw-ws .rc-m .tx{position:absolute;inset:0;background:#fff;padding:16px 20px;display:flex;flex-direction:column;justify-content:center}
#pcw-ws .rc-m .tx > span{font:700 44px/.6 var(--serif);color:var(--acc-t);height:20px}
#pcw-ws .rc-m .tx p{margin:0;font:700 19px/1.25 var(--serif);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
#pcw-ws .rc-m .tx.an{gap:10px}
/* A card that leads with the highlight (PCW_PF_Render::hl_card): addendum 03's Clean treatment, in the writer's accent */
#pcw-ws .rc-m .hlc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px 20px 16px 22px;background:#fff;border-left:4px solid var(--acc)}
#pcw-ws .rc-m .hlc .qm{display:none}
#pcw-ws .rc-m .hlc p{margin:0;font:600 19px/1.3 var(--serif);color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
#pcw-ws .rc-m .hlc-c{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5B666E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-ws .rc-m .hlc-c::before{content:"";flex:none;width:18px;height:2px;background:var(--acc)}
/* A logo-like Link showing its picture (PCW_PF_Render::logo_card): centred small; the name if the image fails */
#pcw-ws .rc-m .lgc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#F5F5F6}
#pcw-ws .rc-m .lgc img{display:block;position:static;max-height:40%;max-width:62%;width:auto;height:auto;object-fit:contain}
#pcw-ws .rc-m .lgc b{font:800 26px/1.15 var(--sans);color:#5B666E;text-align:center}
#pcw-ws .rc-m .lgc img + b{display:none}
/* Marked words: a highlighter stroke (prototype, 2026-10-20) */
#pcw-ws .rc-m .tx mark{color:inherit;text-decoration:none;background:linear-gradient(transparent 55%,color-mix(in srgb,var(--acc) 22%,transparent) 55%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}
#pcw-ws .rc-m .tx sup{font:700 11px var(--sans);color:var(--acc-t)}
#pcw-ws .rc-m .tx small{font-size:12px;line-height:1.4;color:#5B666E;border-top:1px solid #E3E5E7;padding-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pcw-ws .rc-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
#pcw-ws .rc h3{font-size:17px;line-height:1.3;margin:0;font-family:var(--sans);font-weight:700}
#pcw-ws .rc h3 a{color:var(--ink);text-decoration:none}
#pcw-ws .rc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
#pcw-ws .rc .cl{font-size:13px;color:var(--muted)}
#pcw-ws .rc .sm{font-size:14px;line-height:1.5;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pcw-ws .who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
#pcw-ws .who .av{width:34px;height:34px;border-radius:50%;flex:none;background:var(--acc);color:var(--on);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;object-fit:cover}
#pcw-ws .who b{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--ink)}
#pcw-ws .who b img{height:14px;width:auto}
#pcw-ws .who small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pcw-ws .who > div{min-width:0}
/* The writer's name: their profile, above the card's stretched link */
/* The whole writer block (picture, name, headline) opens their profile: the name's link stretches over it, above the piece's own stretched link */
#pcw-ws .who{position:relative;z-index:2}
#pcw-ws .who a.pn{color:inherit;text-decoration:none}
#pcw-ws .who a.pn::after{content:"";position:absolute;inset:0}
#pcw-ws .who:hover a.pn{text-decoration:underline}
#pcw-ws .who a.pn:focus-visible{outline:none}
#pcw-ws .who:has(a.pn:focus-visible){outline:3px solid var(--acc);outline-offset:3px}
/* On a member's directory profile (PCW_PF_Directory::profile_block) */
#pcw-ws.pfb{background:transparent;margin:0 0 32px}
#pcw-ws.pfb .pfb-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
#pcw-ws.pfb .pfb-h h2,#pcw-ws.pfb .pfb-h h3{margin:0}
#pcw-ws.pfb .pfb-h a{font-weight:700;font-size:15px}
#pcw-ws.pfb .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
#pcw-ws .tags{display:flex;flex-wrap:wrap;gap:6px}
#pcw-ws .tg{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc-t)}
#pcw-ws .none{background:var(--card);padding:28px 24px;text-align:center}
#pcw-ws .none b{display:block;font-family:var(--serif);font-size:22px;margin-bottom:6px}
#pcw-ws .none p{color:var(--muted);margin:0 auto 16px;max-width:460px}
#pcw-ws .none .near{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
#pcw-ws .none-s{color:var(--muted)}
#pcw-ws .land{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 28px}
@media (min-width:700px){#pcw-ws .land{grid-template-columns:repeat(4,minmax(0,1fr))}}
#pcw-ws .land a{display:block;background:var(--card);padding:16px 18px;text-decoration:none;border:1px solid var(--rule)}
#pcw-ws .land a:hover{border-color:var(--charcoal)}
#pcw-ws .land b{display:block;color:var(--ink);font-size:15.5px}
#pcw-ws .land span{font-size:13px;color:var(--muted)}
#pcw-ws .bsec{margin:0 0 34px}
#pcw-ws .bsec h2{font-family:var(--serif);font-weight:700;font-size:22px;margin:0 0 4px;color:var(--ink)}
#pcw-ws .bsec > p{font-size:14.5px;color:var(--muted);margin:0 0 14px}
#pcw-ws .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){#pcw-ws .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1040px){#pcw-ws .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
#pcw-ws .tile{display:flex;flex-direction:column;gap:4px;text-align:left;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--charcoal);padding:14px 16px;text-decoration:none}
#pcw-ws .tile:hover{border-color:var(--charcoal)}
#pcw-ws .tile b{font-size:15.5px;color:var(--ink)}
#pcw-ws .tile > span{font-size:13px;color:var(--muted);line-height:1.4}
#pcw-ws .tile .n{font-weight:700;color:var(--azure-t)}
#pcw-ws .tile .dots{display:flex;gap:4px;margin-top:6px}
#pcw-ws .tile .dots i{width:10px;height:10px;border-radius:50%}
#pcw-ws .ftiles{display:flex;flex-wrap:wrap;gap:8px}
#pcw-ws .ftiles .chip{padding:9px 15px;font-size:14px}
#pcw-ws .ktiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){#pcw-ws .ktiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1040px){#pcw-ws .ktiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
#pcw-ws .ktile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--card);border:1px solid var(--rule);padding:16px;text-decoration:none}
#pcw-ws .ktile:hover{border-color:var(--charcoal);background:#fff}
#pcw-ws .ktile svg{width:24px;height:24px;stroke:var(--azure-d);fill:none;stroke-width:1.8}
#pcw-ws .ktile b{font-size:14.5px;color:var(--ink);line-height:1.3}
#pcw-ws .ktile span{font-size:12.5px;color:var(--muted)}
#pcw-ws .lnote{background:var(--azure-tint);padding:14px 18px;font-size:14px;line-height:1.55;color:var(--ink);margin:24px 0 0}
#pcw-ws .more{text-align:center;margin:22px 0 0}
#pcw-ws #more{scroll-margin-top:120px} /* "Show more" without JavaScript opens here, clear of the fixed header */
#pcw-ws .btn-line{display:inline-flex;background:#fff;border:1.5px solid var(--charcoal);color:var(--charcoal);font:700 14.5px var(--sans);padding:11px 18px;border-radius:2px;text-decoration:none}
#pcw-ws .btn-line:hover{background:var(--charcoal);color:#fff}
/* The theme's header overlays the top of the page on phones: keep the heading clear of the logo. */
@media (max-width:699px){#pcw-ws:not(.fit) .hero{padding-top:104px}} /* without work.js; with it, work.js lines the page up under the header */
/* A fresh shuffle on its way in (work.js) */
#pcw-ws [data-mix]{transition:opacity .2s}
#pcw-ws .pool .grid > .rc:nth-child(n+7){display:none}
/* "Find copywriters for website copy →": from the work to the writers in Find a copywriter */
#pcw-ws .findw{margin:-6px 0 20px;font-size:14.5px;font-weight:700}
#pcw-ws .findw a{color:#00739F;text-decoration:none}
#pcw-ws .findw a:hover{text-decoration:underline}