/* Shared finishing layer for the approved Project Detail presentation.
   Editorial widths are separate from deliberately scaled product screens. */
/* The copyright already reserves clearance for the floating navigation. */
body[data-portfolio-case]{padding-bottom:0;--font-primary:'General Sans',General,Arial,sans-serif;--color-text:#262927;--color-surface:#fff;--case-media-width:900px}
body[data-portfolio-case] .nav-dock{position:fixed;z-index:100;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:6px;margin:0;width:max-content;max-width:calc(100vw - 32px);background:#141414;border:3px solid #595B60;border-radius:18px;box-shadow:0 4px 12px #0002}
body[data-portfolio-case] .nav-dock a{display:grid;place-items:center;width:44px;height:44px;padding:0;color:#fff;border-radius:10px;text-decoration:none;transition:transform .18s,background .18s}
body[data-portfolio-case] .nav-dock a:hover{transform:translateY(-2px);background:#303035}
body[data-portfolio-case] .nav-dock a.is-active{background:#000;color:#C5E2ED}
body[data-portfolio-case] .nav-dock a:focus-visible{outline:2px solid #fff;outline-offset:2px}
body[data-portfolio-case] .nav-dock svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
body[data-portfolio-case] :is(.lead,.review-note,.impact-context,.key-result>p,.demo-copy){max-width:none}
#lucid-case-preview[data-project-detail] :is(.learning-thesis,.learning-points p,.outcome-source,.research-signal p,.evidence-lede p){max-width:none}
body[data-portfolio-case] [data-pd-grid]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
body[data-portfolio-case] [data-pd-grid][data-item-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-portfolio-case] [data-pd-grid]>[data-pd-team]{grid-column:1/-1}
body[data-portfolio-case] [data-pd-grid]>*{min-width:0}
body[data-portfolio-case="tiktok"]{--pe-metric-accent:#0062D6}
body[data-portfolio-case="tiktok"] .key-result .metric{margin-top:14px}
body[data-portfolio-case="tiktok"] [data-pd-metric-value]{display:block;font:500 48px/1.12 General,Arial,sans-serif;letter-spacing:-1.8px;color:var(--pe-metric-accent)}
body[data-portfolio-case="tiktok"] [data-pd-metric-unit]{font-size:30px;letter-spacing:-1px}
body[data-portfolio-case="tiktok"] [data-pd-metric-label]{display:block;font:500 19px/1.3 General,Arial,sans-serif;letter-spacing:-.3px;margin-top:14px}
body[data-portfolio-case="tiktok"] .impact-context{font-size:14px;line-height:1.55;font-weight:400;margin-top:16px;color:#59625D}
body[data-portfolio-case="tiktok"] .snapshot-label{margin-top:32px}
body[data-portfolio-case="tiktok"] .snapshot-label+h3{margin-top:10px}
/* Keep the quiet edge index outside the centered article. */
body[data-portfolio-case] .case-edge-navigation .case-edge-label{display:none}
@media(min-width:1261px){
 body[data-portfolio-case] .case-edge-navigation{position:fixed;left:20px;top:24vh;width:156px;z-index:20;background:transparent;padding:0}
 body[data-portfolio-case] .case-edge-navigation .case-edge-track:before{display:block}
 body[data-portfolio-case] .case-edge-navigation .case-edge-dot{display:block}
 body[data-portfolio-case] .case-edge-navigation .case-edge-link{background:transparent;border-radius:0}
}
@media(min-width:1261px) and (hover:hover) and (pointer:fine){
 body[data-portfolio-case] .case-edge-navigation .case-edge-link{opacity:0}
 body[data-portfolio-case] .case-edge-navigation:is(:hover,:focus-within) .case-edge-link{opacity:1}
}
@media(max-width:1260px){
 body[data-portfolio-case] .case-edge-navigation{position:sticky;top:0;left:auto;width:100%;padding:8px 28px;background:#FFFFFFF5;backdrop-filter:blur(12px);z-index:30}
 body[data-portfolio-case] .case-edge-navigation .case-edge-window{height:44px;mask-image:none;overflow:auto}
 body[data-portfolio-case] .case-edge-navigation .case-edge-track{flex-direction:row;gap:12px;width:max-content;padding:0}
 body[data-portfolio-case] .case-edge-navigation .case-edge-link{opacity:1;white-space:nowrap;min-height:44px;height:44px;padding:0 10px}
 body[data-portfolio-case] .case-edge-navigation .case-edge-link[aria-current]{background:#F5F5F5;border-radius:4px}
 body[data-portfolio-case] .case-edge-navigation .case-edge-track:before,body[data-portfolio-case] .case-edge-navigation .case-edge-dot{display:none}
}
@media(max-width:940px){body[data-portfolio-case] [data-pd-grid],body[data-portfolio-case] [data-pd-grid][data-item-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:600px){body[data-portfolio-case="tiktok"] [data-pd-metric-value]{font-size:40px}}
@media(max-width:480px){
 body[data-portfolio-case] [data-pd-grid],body[data-portfolio-case] [data-pd-grid][data-item-count="3"]{grid-template-columns:1fr}
 body[data-portfolio-case] .case-edge-navigation{padding-inline:22px}
 body[data-portfolio-case] .nav-dock{bottom:max(20px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){body[data-portfolio-case] .nav-dock a{transition:none}}

/* A single result stays left aligned while its descriptive label can use the row. */
body[data-portfolio-case="tiktok"] .metric[data-item-count="1"]{grid-template-columns:minmax(0,1fr)}
body[data-portfolio-case="tiktok"] .photo-grid{max-width:none;width:100%}
@media(min-width:811px) and (max-width:1250px){body[data-portfolio-case="shopee"] main,body[data-portfolio-case="shopee"] .page-end{max-width:900px;width:calc(100% - 56px);margin-inline:auto}}

/* Project Detail header contract, 2026-10-20. Shared by React and HTML routes.
   Explicit editorial roles keep app demos, diagrams and metric accents isolated. */
.pd-site-header{box-sizing:border-box;position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:94px;height:auto;padding:20px 40px;margin:0;background:#fff;color:#262927;font-family:'General Sans',General,Arial,sans-serif;z-index:10}
.pd-site-header .pd-wordmark{display:flex;align-items:center;flex-shrink:0;min-height:44px;font:600 30px/1.2 'General Sans',General,Arial,sans-serif;letter-spacing:-1.95px;color:#262927;text-decoration:none}
.pd-site-header .pd-project-trail{display:flex;align-items:center;justify-content:flex-end;min-height:44px;max-width:65%;font:400 13px/1.5 'General Sans',General,Arial,sans-serif;letter-spacing:normal;text-align:right;color:#59625D;text-decoration:none}
.pd-site-header .pd-project-trail:hover{text-decoration:underline;text-underline-offset:4px}
.pd-site-header a:focus-visible{outline:2px solid #262927;outline-offset:4px;border-radius:2px}
/* Canonical opening roles take precedence over older per-project theme rules. */
[data-pd-opening]>:is(.eyebrow,.hero-eyebrow,.pj-eyebrow){font:400 14px/1.65 'General Sans',General,Arial,sans-serif!important;letter-spacing:normal!important;text-transform:none!important;color:#59625D!important;margin:0 0 24px!important}
[data-pd-opening]>h1{font:600 48px/1.12 'General Sans',General,Arial,sans-serif!important;letter-spacing:-1.6px!important;color:#262927!important;margin:0!important}
[data-pd-opening]>:is(.lead,.description,.pj-description,.intro){font:400 20px/1.55 'General Sans',General,Arial,sans-serif!important;letter-spacing:normal!important;color:#262927!important;margin:24px 0 0!important}
body[data-portfolio-case="capture-art"] .key-result>p{font:400 16px/1.55 'General Sans',Arial,sans-serif;color:#262927;letter-spacing:normal}
body[data-portfolio-case="capture-art"]{--ink:#262927;--muted:#59625D;color:#262927}
body[data-portfolio-case="capture-art"] :is(.chapter h2,.chapter h3,.contribution,.rationale){color:#262927}
body[data-portfolio-case="capture-art"] .section-kicker{color:#59625D}
/* Replace the former absolute-header clearance with one shared 56px opening gap. */
body[data-portfolio-case="capture-art"]>main,body[data-portfolio-case="berkeley"]>main{margin-top:56px}
body[data-portfolio-case="shopee"]>.page{padding-top:56px}
body[data-portfolio-case="shopee"] [data-pd-opening]{margin-top:0}
body[data-portfolio-case="tiktok"]>main,body[data-portfolio-case="accessibility"]>.page{padding-top:56px}
body #judi-case-study #judi-project-preview .pj-shell,body #lucid-case-preview[data-project-detail]>.page{padding-top:56px}
@media(max-width:600px){
 .pd-site-header{min-height:80px;padding:16px 22px;gap:16px}
 .pd-site-header .pd-wordmark{font-size:28px;letter-spacing:-1.82px}
 [data-pd-opening]>h1{font-size:34px!important;letter-spacing:-1px!important}
 [data-pd-opening]>:is(.lead,.description,.pj-description,.intro){font-size:18px!important}
 body[data-portfolio-case="capture-art"] .key-result>p{font-size:16px}
 body[data-portfolio-case="capture-art"]>main,body[data-portfolio-case="berkeley"]>main{margin-top:32px}
 body[data-portfolio-case="shopee"]>.page,body[data-portfolio-case="tiktok"]>main,body[data-portfolio-case="accessibility"]>.page,body #judi-case-study #judi-project-preview .pj-shell,body #lucid-case-preview[data-project-detail]>.page{padding-top:32px}
}

body[data-portfolio-case="capture-art"] .meta-label{color:#59625D}