/* Client-specific editorial scenes, built around genuine responsive page captures. */
.portfolio-presentation{container-type:inline-size;position:relative;width:100%;height:100%;min-width:0;isolation:isolate;background:var(--pp-ground);color:var(--pp-accent);font-family:var(--text);overflow:hidden}
.pp-stage{position:relative;width:100%;height:100%;min-height:0}
.pp-view{position:absolute;inset:0;overflow:hidden;display:none}
[data-mode="overview"] .pp-overview,[data-mode="desktop"] .pp-desktop-view,[data-mode="mobile"] .pp-mobile-view{display:block}
.pp-running{position:absolute;top:6%;left:7%;right:7%;display:flex;justify-content:space-between;font-size:clamp(12px,3cqw,19px);line-height:1.2;font-weight:500;letter-spacing:-.01em}
.pp-desktop{overflow:hidden;border:1px solid rgb(18 17 20 / .16);border-radius:8px;background:#fff;box-shadow:0 20px 30px -20px rgb(18 17 20 / .4)}
.pp-desktop img,.pp-mobile img,.pp-object img{display:block;width:100%;height:auto;max-width:100%}
.pp-browser-bar{height:clamp(18px,4cqw,28px);display:flex;align-items:center;gap:4px;padding-inline:10px;background:#f8f7f4;border-bottom:1px solid #e4e2dc;color:#68645d;font-size:clamp(7px,1.6cqw,11px);line-height:1;white-space:nowrap}
.pp-browser-bar i{width:4px;height:4px;border-radius:50%;background:#d4d0c8;flex:none}
.pp-browser-bar span{margin-inline:auto;padding-right:22px;overflow:hidden;text-overflow:ellipsis}
.pp-overview-desktop{position:absolute;left:-8%;top:22%;width:99%;transform:rotate(-5deg);transform-origin:50% 60%;transition:transform .7s var(--e-out)}
.pp-mobile{border:clamp(4px,1.1cqw,7px) solid #f9f8f5;border-radius:clamp(12px,3.2cqw,24px);overflow:hidden;background:#f9f8f5;box-shadow:0 22px 40px -20px rgb(18 17 20 / .65)}
.pp-overview-mobile{position:absolute;right:5%;top:37%;width:33%;transform:rotate(6deg);transition:transform .7s var(--e-out)}
.pp-object{position:absolute;left:6%;bottom:16%;width:25%;margin:0;transform:rotate(-9deg);box-shadow:0 20px 25px -16px rgb(18 17 20 / .35);border:5px solid #f6f3ed;transition:transform .7s var(--e-out)}
.pp-feature{position:absolute;left:7%;right:7%;bottom:12%;margin:0;font:500 clamp(18px,5.3cqw,36px)/1.06 var(--display);letter-spacing:-.045em;max-width:14ch;text-wrap:balance;pointer-events:none}
.portfolio-presentation:has(.pp-controls) .pp-feature{display:none}
.portfolio-presentation:not(:has(.pp-controls)) .pp-feature{padding:8px 10px;background:var(--pp-ground);border-radius:4px;max-width:calc(86% - 20px)}
.pp-controls{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;max-width:94%;border:1px solid rgb(18 17 20 / .18);border-radius:999px;background:var(--paper);color:var(--ink);padding:3px;z-index:5;box-shadow:0 5px 16px rgb(18 17 20 / .08)}
.pp-controls button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 clamp(10px,2.5cqw,18px);border-radius:999px;font:500 clamp(12px,2.8cqw,15px)/1 var(--text);white-space:nowrap;touch-action:manipulation}
.pp-controls [aria-pressed="true"]{color:var(--paper);background:var(--ink)}
.pp-controls button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.pp-desktop-view,.pp-mobile-view{inset:6% 5% calc(3% + 58px);align-items:center;justify-content:center}
[data-mode="desktop"] .pp-desktop-view,[data-mode="mobile"] .pp-mobile-view{display:flex}
.pp-desktop-view .pp-desktop{display:flex;flex-direction:column;position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:1440/1028}
.pp-desktop-view .pp-browser-bar{flex-shrink:0}
.pp-desktop-view .pp-desktop img{flex:1;min-height:0;height:0;object-fit:contain}
.pp-mobile-view .pp-mobile{display:flex;position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:390/844}
.pp-mobile-view .pp-mobile img{height:100%;object-fit:contain}
.pp-landscape .pp-overview-desktop{width:72%;left:2%;top:21%;transform:rotate(-4deg)}
.pp-landscape .pp-overview-mobile{width:22%;right:5%;top:17%;transform:rotate(6deg)}
.pp-landscape .pp-feature{bottom:12%;font-size:clamp(18px,3.5cqw,34px);max-width:21ch}
.pp-landscape .pp-object{left:53%;bottom:20%;width:16%}
.pp-campaign .pp-overview-desktop{left:0;top:17%;width:85%;transform:rotate(-3deg)}
.pp-campaign .pp-object{width:22%;left:7%;bottom:18%}
.pp-campaign .pp-feature{max-width:13ch}
.pp-menu .pp-overview-mobile{width:42%;right:7%;top:17%;transform:rotate(4deg)}
.pp-menu .pp-overview-desktop{width:78%;left:-21%;top:30%;transform:rotate(-8deg)}
.pp-menu .pp-object{width:33%;bottom:22%;left:7%;transform:rotate(-6deg)}
.pp-menu .pp-feature{max-width:10ch}
.pp-evidence .pp-overview-desktop{left:6%;top:18%;width:88%;transform:rotate(-3deg)}
.pp-evidence .pp-overview-desktop img{max-height:68cqh;object-fit:contain}
.pp-evidence .pp-feature{bottom:7%;font-size:clamp(16px,4.3cqw,30px);max-width:22ch}
.pp-pending{position:absolute;inset:30% 8% auto;font:500 clamp(22px,7cqw,42px)/1.12 var(--display);letter-spacing:-.035em}
.pp-pending p{margin:20px 0}
.pp-pending-dot{display:block;width:10px;height:10px;background:var(--red);border-radius:50%}
.pp-compact .pp-running,.pp-compact .pp-feature,.pp-compact .pp-browser-bar,.pp-compact .pp-object{display:none}
.pp-compact .pp-overview-desktop{left:0;top:0;width:90%;transform:none;border:0;border-radius:0;box-shadow:none}
.pp-compact .pp-overview-mobile{right:3%;top:6%;width:34%;transform:rotate(4deg);border-width:2px;border-radius:5px}
.pp-compact.pp-evidence .pp-overview-desktop{width:100%;height:100%}
.pp-compact.pp-evidence .pp-overview-desktop img{width:100%;height:100%;max-height:none;object-fit:cover}
.pp-compact .pp-pending{inset:20%;font-size:8px}
.pp-compact .pp-pending p{margin:3px 0}
.pp-compact .pp-pending-dot{width:4px;height:4px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.portfolio-presentation:hover .pp-overview-desktop{transform:rotate(-2deg) translateY(-2%)}.portfolio-presentation:hover .pp-overview-mobile{transform:rotate(2deg) translateY(-3%)}.portfolio-presentation:hover .pp-object{transform:rotate(-5deg) translateY(-2%)}.pp-compact:hover .pp-overview-desktop{transform:none}}
@media(prefers-reduced-motion:reduce){.portfolio-presentation *{transition:none!important;animation:none!important}}
/* The selected-work native card remains the sheet's measured arrival target. */
.wc-presentation .wc-media{aspect-ratio:4/5}
.wc-presentation .portfolio-presentation{z-index:3;pointer-events:none}
.wc-presentation .pp-controls{pointer-events:auto}
.wc-presentation .wc-presentation-case{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:2;border-radius:inherit;background:transparent}
.wc-presentation-case:focus-visible{outline:3px solid var(--red);outline-offset:-5px}
.case [data-case-cover]>.portfolio-presentation{height:100%;min-height:100%}
.case [data-case-cover] .pp-controls{z-index:5}
/* Preserve the whole photograph at its original proportions. */
.portfolio-presentation.pp-scene .pp-overview .pp-scene-image{display:block;width:100%;height:100%;object-fit:contain}
.pp-scene .pp-desktop-view .pp-desktop{aspect-ratio:var(--pp-desktop-ratio)}
.pp-scene .pp-mobile-view .pp-mobile{aspect-ratio:var(--pp-mobile-ratio)}
.wc-presentation:has(.pp-scene) .wc-media{aspect-ratio:auto;height:auto}
.wc-presentation:has(.pp-scene) .portfolio-presentation{height:auto;padding-bottom:72px}
.wc-presentation:has(.pp-scene) .pp-stage{height:auto;aspect-ratio:var(--pp-scene-ratio)}
.wc-presentation:has(.pp-scene) .pp-overview{bottom:0}
.wc-presentation:has(.pp-scene) .pp-desktop-view,.wc-presentation:has(.pp-scene) .pp-mobile-view{inset:5%}
.wc-presentation:has(.pp-scene) .pp-controls{bottom:10px}
/* The fallback composition also keeps complete interfaces inside its measured stage. */
.portfolio-presentation:not(.pp-scene) .pp-overview-desktop{left:5%;top:16%;width:72%;transform:none}
.portfolio-presentation:not(.pp-scene) .pp-overview-mobile{right:5%;top:28%;width:24%;transform:none}
.portfolio-presentation:not(.pp-scene) .pp-object{display:none}
.pp-desktop-view .pp-desktop{aspect-ratio:var(--pp-desktop-ratio)}
.pp-mobile-view .pp-mobile{aspect-ratio:var(--pp-mobile-ratio)}
/* Size the frame around the real viewport. A width constraint must also reduce its height. */
.pp-desktop-view,.pp-mobile-view{container-type:size}
.portfolio-presentation .pp-desktop-view .pp-desktop{width:min(100%,calc((100cqh - clamp(18px,4cqw,28px))*var(--pp-desktop-aspect)));height:auto;max-height:100%;aspect-ratio:auto}
.pp-desktop-view .pp-desktop img{flex:none;height:auto;width:100%;min-height:0;aspect-ratio:var(--pp-desktop-ratio)}
.pp-mobile-view{--pp-phone-border:clamp(4px,1.1cqw,7px)}
.portfolio-presentation .pp-mobile-view .pp-mobile{width:min(100%,calc((100cqh - 2*var(--pp-phone-border))*var(--pp-mobile-aspect) + 2*var(--pp-phone-border)));height:auto;max-height:100%;aspect-ratio:auto;border-width:var(--pp-phone-border)}
.pp-mobile-view .pp-mobile img{height:auto;width:100%;aspect-ratio:var(--pp-mobile-ratio)}
/* Photographic Work covers follow each original camera composition. */
.wk-f.wk-f-rich .wk-f-m-rich:has(.pp-scene){aspect-ratio:auto!important;height:auto}
.wk-f-m-rich .pp-scene{height:auto;padding-bottom:72px}
.wk-f-m-rich .pp-scene .pp-stage{height:auto;aspect-ratio:var(--pp-scene-ratio)}
.wk-f-m-rich .pp-scene .pp-overview{bottom:0}
.wk-f-m-rich .pp-scene .pp-desktop-view,.wk-f-m-rich .pp-scene .pp-mobile-view{inset:5%}
.wk-f-m-rich .pp-scene .pp-controls{bottom:10px}
.case [data-case-cover] .pp-scene .pp-overview{bottom:calc(3% + 62px)}
/* Overview follows the photo's proportions, with the pill inside its bottom edge. */
.portfolio-presentation.pp-scene[data-mode="overview"]{height:auto;min-height:0;padding:0}
.portfolio-presentation.pp-scene[data-mode="overview"] .pp-stage{height:auto;aspect-ratio:var(--pp-scene-ratio)}
.portfolio-presentation.pp-scene[data-mode="overview"] .pp-overview{inset:0}
.portfolio-presentation.pp-scene[data-mode="overview"] .pp-controls{bottom:10px}