/* Project Detail Framework v1.4 preview — approved v1.2 Airy spacing retained, 2026-10-13.
   Load after base typography and project composition. Never changes story content. */
:is([data-project-detail],#judi-project-preview) {
 --pf-chapter-gap:120px; --pf-subsection-gap:80px; --pf-paragraph-gap:24px;
 --pf-heading-copy-gap:28px; --pf-first-subheading-gap:32px; --pf-visual-gap:36px;
 --pf-banner-metadata-gap:56px; --pf-metadata-contribution-gap:40px;
 --pf-mobile-chapter-gap:80px; --pf-mobile-subsection-gap:56px; --pf-mobile-visual-gap:32px;
}
:is([data-project-detail],#judi-project-preview) :is(.pj-section,.pj-more,[data-pd-section],[data-pd-more]){margin-top:var(--pf-chapter-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > h3{margin-top:var(--pf-subsection-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > h2+h3{margin-top:var(--pf-first-subheading-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-copy,[data-pd-copy]){margin-top:var(--pf-paragraph-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > :is(h2,h3) + :is(.pj-copy,[data-pd-copy]){margin-top:var(--pf-heading-copy-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > :is(.pj-figure,.pj-tour-slot,[data-pd-visual]){margin-top:var(--pf-visual-gap)}
:is([data-project-detail],#judi-project-preview) :is(#overview,[data-pd-opening]) > :is(.pj-metrics,[data-pd-results]){margin-top:32px}
:is([data-project-detail],#judi-project-preview) :is(#overview,[data-pd-opening]) > :is(.pj-banner,[data-pd-banner]){margin-top:38px}
:is([data-project-detail],#judi-project-preview) :is(#overview,[data-pd-opening]) > :is(.pj-metadata,[data-pd-information]){margin-top:var(--pf-banner-metadata-gap)}
:is([data-project-detail],#judi-project-preview) :is(#overview,[data-pd-opening]) > :is(.pj-contribution,[data-pd-contribution]){margin-top:var(--pf-metadata-contribution-gap)}
:is([data-project-detail],#judi-project-preview) :is(.pj-grid4,[data-pd-grid])[data-item-count]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
:is([data-project-detail],#judi-project-preview) :is(.pj-grid4,[data-pd-grid])[data-item-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
:is([data-project-detail],#judi-project-preview) :is(.pj-team-stack,[data-pd-team]){grid-column:1/-1}
@media(max-width:940px){:is([data-project-detail],#judi-project-preview) :is(.pj-grid4,[data-pd-grid])[data-item-count]{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:480px){
 :is([data-project-detail],#judi-project-preview) :is(.pj-section,.pj-more,[data-pd-section],[data-pd-more]){margin-top:var(--pf-mobile-chapter-gap)}
 :is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > h3{margin-top:var(--pf-mobile-subsection-gap)}
 :is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > h2+h3{margin-top:var(--pf-first-subheading-gap)}
 :is([data-project-detail],#judi-project-preview) :is(.pj-section,[data-pd-section]) > :is(.pj-figure,.pj-tour-slot,[data-pd-visual]){margin-top:var(--pf-mobile-visual-gap)}
 :is([data-project-detail],#judi-project-preview) :is(.pj-grid4,[data-pd-grid])[data-item-count]{grid-template-columns:1fr}
}

/* v1.4 Design snapshot. Each host keeps a separate product state instance. */
:is([data-project-detail],#judi-project-preview) [data-pd-snapshot]{display:flow-root;margin-top:var(--pf-chapter-gap);min-width:0}
:is([data-project-detail],#judi-project-preview) [data-pd-snapshot-item]{display:block;min-width:0;margin:32px 0 0}
:is([data-project-detail],#judi-project-preview) [data-pd-snapshot-item] + [data-pd-snapshot-item]{margin-top:var(--pf-subsection-gap)}
:is([data-project-detail],#judi-project-preview) [data-pd-snapshot-demo]{width:100%;min-width:0;margin-top:var(--pf-visual-gap)}
/* All presentation appearance controls share one neutral style, outside product UI. */
:is([data-project-detail],#judi-project-preview) :is([data-pd-appearance],.jmd-theme-tools,.pj-product-theme,.jns-appearance){display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:2px;width:max-content;max-width:100%;padding:3px;border:0;border-radius:8px;background:#F0F2F3}
:is([data-project-detail],#judi-project-preview) :is([data-pd-appearance],.jmd-theme-tools,.pj-product-theme,.jns-appearance) > button{display:inline-flex;align-items:center;justify-content:center;font:500 13px/20px var(--pe-font,'General Sans',sans-serif);min-height:36px;padding:7px 12px;border:0;border-radius:5px;color:#596273;background:transparent;box-shadow:none;white-space:nowrap}
:is([data-project-detail],#judi-project-preview) :is([data-pd-appearance],.jmd-theme-tools,.pj-product-theme,.jns-appearance) > button[aria-pressed=true]{color:#202630;background:#FFFFFF;box-shadow:0 1px 3px rgb(0 0 0 / 12%)}
/* Keep center positioning on the anchor; animate only its single ring/fill layer. */
:is([data-project-detail],#judi-project-preview){--pd-guide-core:#F5B62B;--pd-guide-ring:#F7D38A;--pd-guide-ring-dark:#F8DB9D;--pd-guide-core-size:7px;--pd-guide-ring-size:26px;--pd-guide-duration:2.8s}
:is([data-project-detail],#judi-project-preview) [data-pd-guide]{position:absolute;z-index:7;pointer-events:none;width:var(--pd-guide-ring-size);height:var(--pd-guide-ring-size);transform:translate(-50%,-50%);border:0;border-radius:0;background:none;box-shadow:none}
:is([data-project-detail],#judi-project-preview) [data-pd-guide]::before{content:'';position:absolute;inset:0;box-sizing:border-box;border:2px solid var(--pd-guide-ring);border-radius:50%;background:radial-gradient(circle,#F5B62B52,#F5B62B12);transform-origin:50% 50%;animation:pd-guide-breathe var(--pd-guide-duration) ease-in-out infinite}
:is([data-project-detail],#judi-project-preview) [data-theme=dark] [data-pd-guide]::before{border-color:var(--pd-guide-ring-dark)}
:is([data-project-detail],#judi-project-preview) [data-pd-guide]::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--pd-guide-core-size);height:var(--pd-guide-core-size);border:0;border-radius:50%;background:var(--pd-guide-core);box-shadow:none}
:is([data-project-detail],#judi-project-preview) [data-pd-guide][hidden]{display:none}
@keyframes pd-guide-breathe{0%,100%{transform:scale(.8);opacity:.78}50%{transform:scale(1);opacity:1}}
@media(max-width:480px){:is([data-project-detail],#judi-project-preview) [data-pd-snapshot]{margin-top:var(--pf-mobile-chapter-gap)}:is([data-project-detail],#judi-project-preview) [data-pd-snapshot-item] + [data-pd-snapshot-item]{margin-top:var(--pf-mobile-subsection-gap)}:is([data-project-detail],#judi-project-preview) [data-pd-snapshot-demo]{margin-top:var(--pf-mobile-visual-gap)}}
@media(pointer:coarse){:is([data-project-detail],#judi-project-preview) :is([data-pd-appearance],.jmd-theme-tools,.pj-product-theme,.jns-appearance) > button{min-height:44px}}
@media(prefers-reduced-motion:reduce){:is([data-project-detail],#judi-project-preview) [data-pd-guide]::before{animation:none}}