/* blankfac3 public portfolio (2026-11-04): department grids, category and SFW / NSFW tiles, empty states,
   work pages (character, rig, tool) and project pages (production pipeline).
   Loaded after styles.css, v2.css and glass.css by index, characters, rigs, tools, department, category, nsfw,
   work, rig, tool and project. Markup: the portfolio-v3 blocks in assets/render.js. Tokens: assets/v2.css.
   No accent colour: neutral glass, the text colour for selection and focus. */

/* ---------- shared ---------- */
.pg :is(a, button, summary, select, [tabindex]):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pw-h2 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--text); }
section.pw-sec, section.pw-cats { padding: 0; }
.pw-sec { margin-top: clamp(48px, 5vw, 72px); }
.pw-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.pw-sec-head .proj-filter { max-width: 100%; }
.pw-play { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding-left: 2px; border-radius: 50%;
  color: #fff; background: rgba(12, 12, 17, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); pointer-events: none; }

/* ---------- empty states (department, category, filters, age check, not found) ---------- */
.pw-empty { display: grid; justify-items: center; gap: var(--sp-3); padding: clamp(40px, 7vw, 72px) var(--sp-5); text-align: center; }
.pw-empty-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-1); border-radius: 50%; color: var(--muted); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--hair); }
.pw-empty-ico .ico { width: 26px; height: 26px; }
.pw-empty h2 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--text); }
.pw-empty p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.pw-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.pw-gate { max-width: 640px; margin: 0 auto; }

/* ---------- department and category grids ---------- */
.pw-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); }
.pw-controls .pw-filter { flex: 0 1 auto; min-width: 0; }
.pw-sort { margin-left: auto; }
/* the sort menu as a pill in the same material as the filter beside it (Package B may restyle selects site-wide) */
.pw-sort select { height: 48px; padding: 0 44px 0 20px; border: 0; border-radius: var(--rad-pill); cursor: pointer; -webkit-appearance: none; appearance: none;
  font: 500 var(--fs-sm)/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--text); color-scheme: dark;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
  box-shadow: inset 0 0 0 1px var(--hair); transition: background-color var(--t-hover) ease; }
.pw-sort select:hover { background-color: var(--well-2); }
[data-theme="light"] .pw-sort select { color-scheme: light; }
.pw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px) clamp(16px, 2vw, 24px); }
.pw-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--text); text-decoration: none; }
.pw-cover { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rad-l); background: linear-gradient(155deg, var(--alt), var(--surface)); isolation: isolate; }
.pw-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--lg-ink, 255, 255, 255), .1); }
.pw-cover > img, .pw-cover > video { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; transition: transform .6s var(--ease-out); }
.pw-card:hover .pw-cover > img, .pw-card:hover .pw-cover > video { transform: scale(1.03); }
.pw-card:hover .pw-cover > img.bf3-crop, .pw-card:hover .pw-cover > video.bf3-crop { transform: scale(calc(var(--cz, 1) * 1.03)); }
.pw-card:focus-visible { outline: none; }
.pw-card:focus-visible .pw-cover { outline: 2px solid var(--text); outline-offset: 3px; }
.pw-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); }
.pw-ph .ico { width: 32px; height: 32px; opacity: .6; }
.pw-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 0 4px; min-width: 0; }
.pw-title { margin: 0; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; color: var(--text); }
.pw-year { flex: none; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

/* large tiles in the home card style: categories, SFW / NSFW */
.pw-cats { margin-top: clamp(48px, 6vw, 80px); }
.pw-cats > .pw-h2 { margin-bottom: var(--sp-5); }
.pw-list + .pw-cats, .pw-controls + .pw-list + .pw-cats { margin-top: clamp(56px, 7vw, 96px); }
[data-category] > .pw-cats:first-child, [data-char-root] .pw-cats:first-child, [data-dept-page] > .pw-cats:first-child { margin-top: 0; }
.pw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pw-tiles--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-tiles--split.is-one { grid-template-columns: minmax(0, 560px); }
.pw-tiles--split .pw-tile { aspect-ratio: 4 / 3; }
.pw-tile .dc-plate .dc-txt p { min-height: 0; }
/* coverless cards in the light theme carry dark text (glass.css): their CSS plate is light glass, like the WebGL one */
[data-theme="light"] .dept-card:not(:has(.wt-media[style])) .dc-plate.lg-host > .lg-layer { background: rgba(255, 255, 255, .62); box-shadow: 0 1px 10px rgba(20, 20, 28, .08), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.pw-tile .dc-plate :is(h2, h3) { white-space: normal; }

/* ---------- detail pages: showcase and details ---------- */
.pw-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--sp-5); align-items: start; }
.pw-top.is-solo { grid-template-columns: minmax(0, 720px); }
.pw-top.is-wide { grid-template-columns: minmax(0, 1fr); }
.pw-gal { min-width: 0; }
.pw-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rad-l); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hair); }
[data-theme="light"] .pw-stage { background: rgba(20, 20, 28, .045); }
.pw-stage > .bf3-embed-fit, .pw-stage > .embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.pw-media { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; color: inherit; background: none; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.pw-stage-btn { position: absolute; inset: 0; height: 100%; }
.pw-stage-btn > img, .pw-stage-btn > video { width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
.pw-cap { margin: var(--sp-3) 4px 0; min-height: 1.55em; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.pw-thumbs { display: flex; gap: 10px; margin-top: var(--sp-3); padding: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pw-thumbs::-webkit-scrollbar { display: none; }
.pw-th { position: relative; flex: none; width: 96px; height: 72px; padding: 0; border: 0; overflow: hidden; border-radius: var(--rad-s); background: var(--well-2); cursor: pointer;
  opacity: .58; transition: opacity var(--t-hover) ease, box-shadow var(--t-ui) var(--ease-out); -webkit-appearance: none; appearance: none; }
.pw-th:hover { opacity: .85; }
.pw-th[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.pw-th > img, .pw-th > video { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.pw-th .embed-thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.pw-th .pw-play { right: 6px; bottom: 6px; width: 24px; height: 24px; }
.pw-th .pw-play svg { width: 12px; height: 12px; }

.pw-aside { display: grid; gap: var(--sp-5); padding: var(--sp-5); min-width: 0; }
@media (min-width: 901px) { .pw-top:not(.is-solo) .pw-aside { position: sticky; top: 104px; } }
.pw-facts { display: grid; margin: 0; }
.pw-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--hair); }
.pw-facts > div:first-child { border-top: 0; padding-top: 0; }
.pw-facts > div:last-child { padding-bottom: 0; }
.pw-facts dt { flex: none; font-size: var(--fs-sm); color: var(--muted); }
.pw-facts dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.pw-facts dd a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 4px; }
.pw-facts dd a:hover { text-decoration-color: currentColor; }
.pw-facts--row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); }
.pw-facts--row > div { display: grid; gap: 4px; padding: 0; border: 0; }
.pw-facts--row dd { text-align: left; }
.pw-links { display: grid; gap: var(--sp-2); padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
.pw-facts:empty + .pw-links, .pw-sale + .pw-links { padding-top: 0; border-top: 0; }
.pw-links .btn { justify-content: space-between; width: 100%; }
.pw-links .btn .ico { width: 18px; height: 18px; color: var(--muted); }
.pw-sale { display: grid; justify-items: start; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hair); }
.pw-sale:last-child { padding-bottom: 0; border-bottom: 0; }
.pw-sale .pw-facts { width: 100%; }
.pw-sale p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.pw-sale .btn { width: 100%; justify-content: center; }
.pw-text { margin: 0; max-width: 72ch; white-space: pre-line; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in srgb, var(--text) 84%, transparent); }
.pw-viewer { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rad-l); background: #000; }
.pw-viewer > iframe, .pw-viewer > model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- process and pipeline: numbered steps, the name beside the media ---------- */
.pw-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pw-step { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; padding: var(--sp-6) 0; border-top: 1px solid var(--hair); }
.pw-step:first-child { padding-top: 0; border-top: 0; }
.pw-step:last-child { padding-bottom: 0; }
.pw-step-head { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
@media (min-width: 901px) { .pw-step-head { position: sticky; top: 104px; } }
.pw-step-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 1rem/1 "Hanken Grotesk", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--text); background: var(--well-2); box-shadow: inset 0 0 0 1px var(--hair); }
.pw-step-t { display: grid; gap: var(--sp-2); min-width: 0; padding-top: 6px; }
.pw-step-t h3 { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.pw-soft { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.pw-soft img { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.pw-step-body { display: grid; gap: var(--sp-4); min-width: 0; }
.pw-sub { margin: var(--sp-3) 0 0; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.pw-step-body > .pw-sub:first-child { margin-top: 0; }
.pw-single, .pw-mgrid figure, .pw-video, .pw-hero { margin: 0; min-width: 0; }
.pw-single .pw-media, .pw-mgrid .pw-media, .pw-hero .pw-media { border-radius: var(--rad-m); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--hair); }
[data-theme="light"] :is(.pw-single, .pw-mgrid, .pw-hero) .pw-media { background: rgba(20, 20, 28, .045); }
.pw-single .pw-media > img, .pw-single .pw-media > video { width: 100%; height: auto; max-width: 100%; max-height: min(72vh, 640px); object-fit: contain; display: block; margin: 0 auto; }
.pw-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pw-mgrid .pw-media { aspect-ratio: 4 / 3; }
.pw-mgrid.is-odd > figure:first-child { grid-column: 1 / -1; }
.pw-mgrid.is-odd > figure:first-child .pw-media { aspect-ratio: 16 / 9; }
.pw-mgrid .pw-media > img, .pw-mgrid .pw-media > video, .pw-hero .pw-media > img, .pw-hero .pw-media > video { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.pw-mgrid .pw-media:hover > img, .pw-mgrid .pw-media:hover > video { transform: scale(1.025); }
.pw-mgrid .pw-media .embed-thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; }
:is(.pw-single, .pw-mgrid, .pw-video) figcaption { margin: var(--sp-2) 4px 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.pw-video .bf3-embed { margin-inline: 0; border-radius: var(--rad-m); --bf3-maxh: 72vh; }
.pw-detail .bf3-embed-cap { font: 500 .9375rem/1.35 "Hanken Grotesk", system-ui, sans-serif; padding: 40px 16px 14px; }
.pw-detail .bf3-embed-prov { font: 600 .875rem/1.35 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: normal; text-transform: none; opacity: .9; }

/* project: wide cover, facts, phases */
.pw-intro { display: grid; gap: var(--sp-5); }
.pw-hero .pw-media { aspect-ratio: 2 / 1; border-radius: var(--rad-l); }
.pw-phase > .pw-video { margin-bottom: var(--sp-6); }
.pw-pipeline .pw-sec-head { margin-bottom: var(--sp-6); }

/* ---------- lightbox: neutral glass controls ---------- */
.lightbox { background: rgba(6, 6, 9, .9); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.lightbox.open { animation: pw-fade var(--t-ui) var(--ease-out); }
.lightbox.open .lb-body { animation: pw-rise var(--t-panel) var(--ease-out); }
.lightbox .lb-img { border-radius: var(--rad-s); }
.lightbox :is(.lb-close, .lb-nav) { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; font-size: 0; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background var(--t-hover) ease, transform var(--t-press) ease; }
.lightbox :is(.lb-close, .lb-nav):hover { background: rgba(255, 255, 255, .18); }
.lightbox :is(.lb-close, .lb-nav):active { transform: scale(.95); }
.lightbox .lb-close { position: absolute; top: 20px; right: 20px; }
.lightbox :is(.lb-close, .lb-nav) .ico { width: 22px; height: 22px; }
.lightbox .lb-prev .ico { transform: rotate(180deg); }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pw-rise { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- home hero: commission and free-work status (m7, 2026-11-04) ----------
   Readable links at the body size, the glass pill of the site's buttons (44 px+ target), an arrow for "leads on",
   instead of 13 px monospace capsules. The label is the link's name. */
.hero .status-row { gap: 12px; margin: 28px 0 6px; }
.hero .status-row .status-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 22px;
  font: 600 1rem/1.2 "Hanken Grotesk", system-ui, sans-serif !important; letter-spacing: normal; color: var(--text); text-decoration: none; }
.hero .status-row .status-btn .status-label { font: inherit !important; font-size: 1rem !important; }
.hero .status-row .status-btn .status-go { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform var(--t-hover, 160ms) var(--ease-out, ease), color var(--t-hover, 160ms) ease; }
.hero .status-row .status-btn:hover .status-go { color: var(--text); transform: translate(1px, -1px); }
.hero .status-row .status-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.hero .status-row [data-freebie-banner] { display: contents; }
@media (max-width: 480px) { .hero .status-row .status-btn { padding: 0 16px 0 18px; } }

/* ---------- department pages: the lede sits under the title at every width (POLISH, 2026-11-04) ----------
   assets/v2.css let it run under the back arrow below 600 px while it was indented to the title above. */
@media (max-width: 600px) {
  .pg-head--back:not(.work-head) > .lede, .pg-head--back:not(.work-head) > .cat-crumbs { grid-column: 2; }
}

/* ---------- home cards: the CSS plate stays until the WebGL plate has drawn (assets/glass.js showWebGL) ---------- */
.dc-plate:not(.lg-webgl) > canvas { visibility: hidden; }
.dc-plate:has(> .lg-layer.lg-fadeout) > canvas { visibility: visible; max-width: none !important; max-height: none !important; }
.dc-plate > .lg-layer.lg-fadeout { opacity: 0; transition: opacity .32s var(--ease-out); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-top, .pw-top.is-solo { grid-template-columns: minmax(0, 1fr); }
  .pw-step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .pw-step-t { padding-top: 7px; }
}
@media (max-width: 680px) {
  .pw-tiles, .pw-tiles--split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pw-tiles--split .pw-tile { aspect-ratio: 4 / 5; }
  .pw-hero .pw-media { aspect-ratio: 4 / 3; }
  .pw-step { padding: var(--sp-5) 0; }
  .pw-step-t h3 { font-size: 1.25rem; }
  .pw-sec-head .proj-filter { width: 100%; }
  .pw-sec-head .proj-filter button, .pw-filter button { padding: 0 12px; font-size: .875rem; }
}
@media (max-width: 560px) {
  .pw-grid { gap: 22px 12px; }
  .pw-card { gap: 10px; }
  .pw-cover { border-radius: var(--rad-m); }
  .pw-title { font-size: 1rem; }
  .pw-meta { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 2px; }
  .pw-stage { aspect-ratio: 4 / 3; }
  .pw-mgrid { gap: var(--sp-2); }
  .pw-mgrid .pw-media { border-radius: var(--rad-s); }
  .pw-aside { padding: var(--sp-5) var(--sp-4); }
  .lightbox .lb-close { top: 12px; right: 12px; }
  .lightbox .lb-nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-cover > img, .pw-cover > video, .pw-mgrid .pw-media > img, .pw-mgrid .pw-media > video { transition: none; }
  .pw-card:hover .pw-cover > img, .pw-card:hover .pw-cover > video, .pw-mgrid .pw-media:hover > img { transform: none; }
  .lightbox.open, .lightbox.open .lb-body { animation: none; }
  .dc-plate > .lg-layer.lg-fadeout { transition: none; }
}
/* 12.11: empty states without the icon tile above the heading (Pasha: no icon square over a heading) */
.pw-empty-ico { display: none; }

/* ---------- 12.11: work / project pages, calmer process and cover (Pasha: stages and previews looked blown apart) ----------
   A step is a header row (number, name, software) over one even grid of 16:9 tiles: three columns on wide screens,
   two on phones; video links are tiles too. The cover frame fills with a soft blurred copy of its picture. */
.pw-step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 901px) { .pw-step-head { position: static; } }
.pw-step-head { align-items: center; }
.pw-step-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding-top: 0; }
.pw-mgrid.is-even { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-mgrid.is-even > figure .pw-media, .pw-mgrid.is-even > .pw-video .bf3-embed { aspect-ratio: 16 / 9; }
.pw-mgrid.is-even > .pw-video { margin: 0; min-width: 0; }
.pw-mgrid.is-even > .pw-video .bf3-embed { width: 100%; height: auto; --bf3-maxh: none; }
.pw-mgrid.is-even > .pw-video .bf3-embed :is(iframe, img, .bf3-embed-face) { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .pw-mgrid.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pw-stage-bg { position: absolute; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(42px) saturate(1.15); opacity: .55; transform: translateZ(0); pointer-events: none; }
[data-theme="light"] .pw-stage-bg { opacity: .45; }
.pw-stage > .pw-stage-btn { z-index: 1; }
@media (prefers-reduced-transparency: reduce) { .pw-stage-bg { display: none; } }
/* 12.11: segment rows scroll sideways when they must, without a visible scrollbar (it showed under the render tabs) */
.proj-filter, .pw-seg { scrollbar-width: none; }
.proj-filter::-webkit-scrollbar, .pw-seg::-webkit-scrollbar { display: none; }
/* 12.11: one preview shape everywhere on work / project pages (--pw-ar, Studio "Preview shape", default 16:9);
   every tile opens the viewer. */
.pw-mgrid.is-even > figure .pw-media { aspect-ratio: var(--pw-ar, 16 / 9); }
.pw-stage { aspect-ratio: var(--pw-ar, 16 / 9); }
.pw-mgrid.is-even > figure .pw-media > img, .pw-mgrid.is-even > figure .pw-media > video { width: 100%; height: 100%; object-fit: cover; }
.pw-mgrid.is-even .pw-media .embed-thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.pw-mgrid .pw-play { width: 48px; height: 48px; right: 50%; bottom: 50%; transform: translate(50%, 50%); }
@media (max-width: 900px) { .pw-stage { aspect-ratio: var(--pw-ar, 16 / 9); } }
/* the viewer: a link to the video's own page under the player (when the player asks to sign in, it opens there) */
.lb-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: rgba(255, 255, 255, .82); font: 500 15px/1 "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; }
.lb-src:hover { color: #fff; opacity: .72; }
.lb-body { display: flex; flex-direction: column; align-items: center; }