/* PAMERAN.IN — Step 4 Portfolio editorial, scoped. No decorative SaaS cards. */
body:has(.portfolio-editorial){background:#faf9f7}
.portfolio-editorial{color:#16191e;background:#faf9f7}
.pf-banner{position:relative;background:#f47616;color:#fff;overflow:hidden;min-height:172px}
.pf-banner::before{display:none}
.pf-banner::after{display:none}
.pf-banner-inner{position:relative;min-height:172px;padding-top:34px;padding-bottom:28px;z-index:1}
.pf-breadcrumb{display:flex;gap:11px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.83)}
.pf-breadcrumb a{color:inherit;text-decoration:none}
.pf-banner h1{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:clamp(40px,5.4vw,72px);font-weight:700;line-height:1.0;letter-spacing:-.065em;margin:12px 0 0}
.pf-title-dot{color:#1b1b1b}
.pf-banner-side{position:absolute;right:0;bottom:28px;font-size:10px;font-weight:700;letter-spacing:.17em;color:rgba(255,255,255,.85)}
.pf-gallery{padding:96px 0 115px}
.pf-intro{text-align:center;max-width:820px;margin:0 auto}
.pf-eyebrow{font-size:10px;letter-spacing:.25em;font-weight:800;color:#747578;display:flex;align-items:center;gap:12px;justify-content:center}
.pf-eyebrow-line{width:28px;height:2px;background:#f47616}
.pf-intro h2{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:clamp(32px,4vw,55px);font-weight:600;line-height:1.17;letter-spacing:-.06em;margin:25px 0 20px}
.pf-intro h2 em{font-style:normal;color:#e9680b}
.pf-intro>p{font-size:15px;line-height:1.85;color:#70747c;max-width:650px;margin:0 auto}
.pf-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:73px 0 27px;border-bottom:1px solid #dededb}
.pf-tabs{display:flex;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;gap:27px;max-width:100%;align-items:center}
.pf-tab{font:600 12px/1.4 Inter,sans-serif;background:none;border:0;border-bottom:2px solid transparent;padding:0 0 19px;cursor:pointer;color:#757677;transition:color .18s ease,border-color .18s ease}
.pf-tab:hover,.pf-tab:focus-visible{color:#16191e}.pf-tab:focus-visible{outline:2px solid #f47616;outline-offset:-3px}
.pf-tab.is-active{color:#111418;border-color:#f47616;font-weight:800}
.pf-count{padding-bottom:19px;white-space:nowrap;color:#8b8f94;font-weight:700;font-size:10px;letter-spacing:.1em}
.pf-count strong{color:#171a1e;font-size:12px}
.pf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:17px;row-gap:45px}
.pf-project{min-width:0;animation:pf-reveal .25s ease both}
.pf-project[hidden]{display:none!important}
.pf-project-link{color:#171a1e;text-decoration:none;display:block}
.pf-image{aspect-ratio:1.22;position:relative;overflow:hidden;background:#e9e8e5;isolation:isolate}
.pf-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.22,.68,0,1)}
.pf-project:hover .pf-image img,.pf-project-link:focus-visible .pf-image img{transform:scale(1.045)}
.pf-image-arrow{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;background:#f47616;color:#fff;font-weight:800;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s}
.pf-project:hover .pf-image-arrow,.pf-project-link:focus-visible .pf-image-arrow{opacity:1;transform:translateY(0)}
.pf-project-link:focus-visible{outline:2px solid #f47616;outline-offset:5px}
.pf-meta{display:flex;justify-content:space-between;gap:8px;margin:18px 0 9px;text-transform:uppercase;color:#bd621f;font-size:9px;font-weight:800;letter-spacing:.11em}
.pf-meta span:last-child{color:#97999c}
.pf-project h3{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:700;font-size:15px;line-height:1.45;letter-spacing:-.035em;margin:0;color:#151719}
.pf-project p{font-size:12px;margin:7px 0 0;line-height:1.5;color:#777b82}
.pf-endnote{display:flex;gap:24px;align-items:center;justify-content:space-between;border-top:1px solid #e0dfda;margin-top:72px;padding-top:24px}
.pf-endnote p{font-size:12px;line-height:1.7;color:#818289;max-width:680px;margin:0}
.pf-more{color:#dd6413;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.pf-more span{padding-left:8px}
.pf-contact-band{background:#171820;color:#fff;padding:75px 0}
.pf-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:26px}
.pf-contact-inner>div>span{font-size:10px;letter-spacing:.19em;color:#ff8834;font-weight:800}
.pf-contact-inner h2{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:clamp(24px,3vw,37px);font-weight:500;line-height:1.35;letter-spacing:-.045em;margin:16px 0 0}
.pf-contact-inner>a{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 25px;background:#f47616;color:#111;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap;text-decoration:none;transition:background .2s}
.pf-contact-inner>a:hover{background:#ff9c40}
@keyframes pf-reveal{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pf-count{display:none}.pf-banner-side{display:none}.pf-controls{margin-top:54px}}
@media(max-width:780px){.pf-gallery{padding:68px 0 85px}.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 14px}.pf-tabs{gap:22px}.pf-intro h2{font-size:clamp(30px,5vw,42px)}.pf-endnote,.pf-contact-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.pf-banner,.pf-banner-inner{min-height:138px}.pf-banner-inner{padding-top:24px;padding-bottom:20px}.pf-banner h1{font-size:36px;margin-top:12px}.pf-gallery{padding:55px 0 72px}.pf-intro h2{font-size:31px}.pf-intro>p{font-size:13px}.pf-controls{margin-top:44px}.pf-tabs{gap:20px}.pf-tab{font-size:11px;padding-bottom:16px}.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}.pf-image{aspect-ratio:1/1.04}.pf-meta{font-size:8px;gap:3px;margin-top:11px}.pf-project h3{font-size:12px;line-height:1.4}.pf-project p{font-size:10px;margin-top:5px}.pf-image-arrow{opacity:1;transform:none;width:26px;height:26px;right:6px;bottom:6px;font-size:13px}.pf-endnote{margin-top:50px}.pf-contact-band{padding:52px 0}.pf-contact-inner h2{font-size:25px}.pf-contact-inner>a{width:100%}}
@media(prefers-reduced-motion:reduce){.pf-image img,.pf-image-arrow,.pf-tab,.pf-project{transition:none!important;animation:none!important}}


/* Step 11: calendar cards should show the full desk-calendar object */
.pf-project[data-pf-category="calendar"] .pf-image{
  display:grid;
  place-items:center;
  background:#f4f2ee;
}
.pf-project[data-pf-category="calendar"] .pf-image img{
  width:80%;
  height:80%;
  object-fit:contain;
  object-position:center center;
}
.pf-project[data-pf-category="calendar"]:hover .pf-image img,
.pf-project[data-pf-category="calendar"] .pf-project-link:focus-visible .pf-image img{
  transform:scale(1.01);
}
@media(max-width:520px){
  .pf-project[data-pf-category="calendar"] .pf-image img{
    width:84%;
    height:84%;
  }
}

/* Step 16: source-preserving framing for manual excerpts and photography */
.pf-project--extended .pf-image{display:grid;place-items:center;background:#eeece7}
.pf-project--extended .pf-image img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .4s ease}
.pf-project--extended:hover .pf-image img{transform:scale(1.018)}
.pf-project[data-pf-category="design"] .pf-image{background:#e8e9ec}
.pf-project[data-pf-category="photography"] .pf-image{background:#e5e4df}
.pf-project[data-pf-category="calendar"].pf-project--extended .pf-image img{width:92%;height:92%;object-fit:contain}
@media(max-width:520px){.pf-project--extended .pf-image{aspect-ratio:1.08}.pf-project[data-pf-category="calendar"].pf-project--extended .pf-image img{width:94%;height:94%}}