/* Projects: one large project (60%) beside two stacked (40%), text filters with a gold underline, PhotoSwipe album */
#projects.p3-sec{--p3-gold:#C9A862}
.p3-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:30px}
.p3-lbl{display:flex;align-items:center;gap:12px;color:var(--p3-gold);font-size:.95rem;margin-bottom:10px}
.p3-lbl::before{content:"";width:46px;height:1px;background:var(--p3-gold)}
.p3-explore{flex:0 0 auto;margin-top:48px;display:inline-flex;align-items:center;gap:14px;appearance:none;background:none;color:var(--ink);font:inherit;font-size:1rem;border:1px solid currentColor;border-radius:2px;padding:12px 28px;cursor:pointer;transition:border-color .25s,color .25s}
.p3-explore svg{width:18px;height:18px;color:var(--p3-gold);transition:transform .3s}
[dir=ltr] .p3-explore svg{transform:scaleX(-1)}
.p3-explore:hover{border-color:var(--p3-gold)}
.p3-explore:hover svg{transform:translateX(-4px)}
[dir=ltr] .p3-explore:hover svg{transform:scaleX(-1) translateX(-4px)}
.p3-filters{display:flex;flex-wrap:wrap;gap:4px clamp(24px,3.6vw,56px);margin:0 0 26px;padding:0;list-style:none}
.p3-filters button{appearance:none;background:none;border:0;padding:8px 2px 10px;font:inherit;font-size:1.02rem;color:var(--ink);opacity:.82;cursor:pointer;border-bottom:2px solid transparent;transition:color .25s,border-color .25s,opacity .25s}
.p3-filters button:hover{opacity:1}
.p3-filters button[aria-pressed="true"]{opacity:1;color:var(--p3-gold);border-bottom-color:var(--p3-gold)}
.p3-filters button:focus-visible,.p3-card:focus-visible,.p3-more:focus-visible,.p3-explore:focus-visible{outline:2px solid var(--p3-gold);outline-offset:4px}
.p3-text{margin:-10px 0 20px;color:var(--ink-soft);font-size:.95rem}
.p3-text:empty{display:none}
.p3-group{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:clamp(420px,40vw,640px);margin-bottom:12px}
.p3-group>.p3-card:first-child{grid-row:1/3}
.p3-group.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.p3-group.n2{grid-template-rows:1fr}
.p3-group.n2>.p3-card:first-child{grid-row:auto}
.p3-card{position:relative;display:block;overflow:hidden;border:0;padding:0;border-radius:3px;background:rgba(255,255,255,.06);cursor:zoom-in;color:#fff;font:inherit;text-align:start;isolation:isolate}
.p3-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.p3-card:hover img,.p3-card:focus-visible img{transform:scale(1.04)}
.p3-card::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(to top,rgba(8,20,42,.78),rgba(8,20,42,.35) 45%,rgba(8,20,42,0));z-index:1;pointer-events:none}
.p3-cap{position:absolute;inset:auto 0 0;z-index:2;padding:16px 18px;display:flex;align-items:flex-end;gap:16px}
.p3-cap .p3-t{flex:1;min-width:0}
.p3-cap b{display:block;font-size:1.2rem;font-weight:600;line-height:1.35}
.p3-group>.p3-card:first-child .p3-cap b{font-size:1.55rem}
.p3-cap .p3-m{display:block;margin-top:4px;font-size:.88rem;color:rgba(255,255,255,.82)}
.p3-go{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);transition:background .3s,border-color .3s}
.p3-go svg{width:18px;height:18px}
[dir=ltr] .p3-go svg{transform:none}
.p3-card:hover .p3-go{background:var(--p3-gold);border-color:var(--p3-gold)}
.p3-n{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:.88rem;color:rgba(255,255,255,.88);margin-inline-start:auto;align-self:center}
.p3-n svg{width:18px;height:18px}
.p3-foot{display:flex;align-items:center;gap:22px;margin-top:30px}
.p3-foot::before,.p3-foot::after{content:"";flex:1;height:1px;background:var(--line)}
.p3-foot:empty{display:none}
.p3-more{appearance:none;background:none;border:0;font:inherit;font-size:.98rem;color:var(--p3-gold);padding:6px 4px;cursor:pointer}
.p3-more:hover{text-decoration:underline;text-underline-offset:6px}
.p3-empty{color:var(--ink-soft);padding:30px 0}
@media (max-width:760px){
  .p3-head{flex-direction:column;gap:18px}
  .p3-explore{margin-top:0;padding:10px 20px}
  .p3-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:24px}
  .p3-filters::-webkit-scrollbar{display:none}
  .p3-filters button{white-space:nowrap}
  .p3-group,.p3-group.n1,.p3-group.n2{grid-template-columns:1fr;grid-template-rows:none;height:auto}
  .p3-group>.p3-card,.p3-group>.p3-card:first-child{grid-row:auto;aspect-ratio:4/3}
  .p3-group>.p3-card:first-child .p3-cap b{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){.p3-card img{transition:none}}
.pswp{--pswp-bg:#08142a}
.pswp__p3cap{position:absolute;inset:auto 0 0;padding:14px 20px 18px;text-align:center;color:#fff;font-size:.95rem;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);pointer-events:none}
.pswp__p3cap small{display:block;color:#C9A862;margin-top:2px}
.pswp__counter{direction:ltr;unicode-bidi:isolate}
/* heading uses the site's standard section head (same as Services / Process) */
.p3-head{align-items:flex-end}.p3-head .sec-head{margin:0;flex:1}
/* no caption text on the photos: drop the dark fade, keep only the small arrow */
.p3-card::after{display:none}
.p3-cap{justify-content:flex-end}
.p3-go{background:rgba(8,20,42,.35);backdrop-filter:blur(4px)}
.pswp__p3cap{display:none}
/* Pop-up album: framed photo on a dimmed, locked page; photos turn like book pages */
html.bk-lock,html.bk-lock body{overflow:hidden!important}
.bk{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(5,12,26,.82);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;overscroll-behavior:contain}
.bk.on{opacity:1}
.bk[hidden]{display:none}
.bk-in{position:relative;width:min(1180px,92vw);display:flex;flex-direction:column;gap:14px;transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bk.on .bk-in{transform:none}
.bk-top{display:flex;align-items:center;justify-content:space-between;color:#fff}
.bk-n{font-size:.9rem;letter-spacing:.06em;direction:ltr;color:#C9A862}
.bk-x{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.bk-x:hover{background:rgba(255,255,255,.18)}
.bk-stage{position:relative;aspect-ratio:3/2;max-height:72vh;width:100%;perspective:2200px;background:#0b1830;box-shadow:0 30px 80px rgba(0,0,0,.55);border:6px solid #fff;border-radius:2px}
.bk-page{position:absolute;inset:0;overflow:hidden;background:#0b1830;backface-visibility:hidden;transform-style:preserve-3d}
.bk-page img{width:100%;height:100%;object-fit:contain;display:block}
.bk-cur{z-index:2}
.bk-under{z-index:1}
/* hinge on the reading edge: right for Arabic, left for EN/ZH */
.bk[dir=rtl] .bk-page{transform-origin:100% 50%}
.bk[dir=ltr] .bk-page{transform-origin:0% 50%}
.bk-page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(to left,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.bk[dir=ltr] .bk-page::after{background:linear-gradient(to right,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.bk-turn{animation:bkTurn .72s cubic-bezier(.45,.05,.3,1) forwards}
.bk-turn::after,.bk-turn-in::after{animation:bkShade .72s ease forwards}
.bk-back .bk-under{z-index:3}
.bk-turn-in{animation:bkTurnIn .72s cubic-bezier(.45,.05,.3,1) forwards}
.bk[dir=rtl] .bk-turn{--a:180deg}.bk[dir=ltr] .bk-turn{--a:-180deg}
.bk[dir=rtl] .bk-turn-in{--a:180deg}.bk[dir=ltr] .bk-turn-in{--a:-180deg}
@keyframes bkTurn{from{transform:rotateY(0)}to{transform:rotateY(var(--a))}}
@keyframes bkTurnIn{from{transform:rotateY(var(--a))}to{transform:rotateY(0)}}
@keyframes bkShade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.bk-nav{position:absolute;top:calc(50% - 10px);width:52px;height:52px;border-radius:50%;border:0;background:#C9A862;color:#102440;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:5;transition:opacity .2s,transform .2s}
.bk-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-nav:hover{transform:scale(1.06)}
.bk-nav:disabled{opacity:.25;cursor:default;transform:none}
.bk[dir=rtl] .bk-next{left:-26px}.bk[dir=rtl] .bk-prev{right:-26px}
.bk[dir=ltr] .bk-next{right:-26px}.bk[dir=ltr] .bk-prev{left:-26px}
.bk[dir=ltr] .bk-nav svg{transform:scaleX(-1)}
.bk-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin;justify-content:safe center}
.bk-thumbs:empty{display:none}
.bk-thumbs button{flex:0 0 auto;width:84px;height:56px;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.bk-thumbs button[aria-current="true"]{opacity:1;border-color:#C9A862}
.bk-thumbs button:hover{opacity:.9}
.bk-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.bk button:focus-visible{outline:2px solid #C9A862;outline-offset:3px}
@media (max-width:760px){
  .bk-in{width:94vw}.bk-stage{border-width:4px;aspect-ratio:4/3}
  .bk-nav{width:42px;height:42px;top:auto;bottom:-58px}
  .bk[dir=rtl] .bk-next,.bk[dir=ltr] .bk-prev{left:calc(50% - 50px);right:auto}
  .bk[dir=rtl] .bk-prev,.bk[dir=ltr] .bk-next{right:calc(50% - 50px);left:auto}
  .bk-thumbs{margin-top:56px}.bk-thumbs button{width:64px;height:44px}
}
/* softer turn and a frame that travels with the page */
.bk-stage{perspective:4200px;border:0;background:transparent}
.bk-page{border:6px solid #fff;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
@media (max-width:760px){.bk-page{border-width:4px}}
/* v2: frame sized to each photo; varied turn effects */
.bk-in{width:auto;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bk-stage{max-height:none;transition:aspect-ratio .5s}
.bk-page img{object-fit:cover}
.bk-page{transform-origin:50% 50%}
.bk[dir=rtl][data-dir=fwd] .fx-flip,.bk[dir=ltr][data-dir=back] .fx-flip{transform-origin:100% 50%;animation:fxFlipR .76s cubic-bezier(.45,.05,.3,1) forwards}
.bk[dir=ltr][data-dir=fwd] .fx-flip,.bk[dir=rtl][data-dir=back] .fx-flip{transform-origin:0% 50%;animation:fxFlipL .76s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes fxFlipR{to{transform:rotateY(180deg)}}@keyframes fxFlipL{to{transform:rotateY(-180deg)}}
.fx-fold{transform-origin:50% 0%;animation:fxFold .76s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes fxFold{to{transform:rotateX(-180deg)}}
.bk[dir=rtl][data-dir=fwd] .fx-slide,.bk[dir=ltr][data-dir=back] .fx-slide{animation:fxSlideR .7s cubic-bezier(.6,0,.3,1) forwards}
.bk[dir=ltr][data-dir=fwd] .fx-slide,.bk[dir=rtl][data-dir=back] .fx-slide{animation:fxSlideL .7s cubic-bezier(.6,0,.3,1) forwards}
@keyframes fxSlideR{to{transform:translateX(105%) rotate(4deg);opacity:.2}}@keyframes fxSlideL{to{transform:translateX(-105%) rotate(-4deg);opacity:.2}}
.fx-zoom{animation:fxZoom .7s ease forwards}.in-zoom{animation:inZoom .76s ease forwards}
@keyframes fxZoom{to{transform:scale(1.25);opacity:0}}@keyframes inZoom{from{transform:scale(.9)}to{transform:none}}
.fx-circle{animation:fxCircle .76s cubic-bezier(.6,0,.3,1) forwards}
@keyframes fxCircle{from{clip-path:circle(75% at 50% 50%)}to{clip-path:circle(0% at 50% 50%)}}
.bk[dir=rtl][data-dir=fwd] .fx-wipe,.bk[dir=ltr][data-dir=back] .fx-wipe{animation:fxWipeR .7s cubic-bezier(.6,0,.3,1) forwards}
.bk[dir=ltr][data-dir=fwd] .fx-wipe,.bk[dir=rtl][data-dir=back] .fx-wipe{animation:fxWipeL .7s cubic-bezier(.6,0,.3,1) forwards}
@keyframes fxWipeR{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}@keyframes fxWipeL{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
.bk[dir=rtl][data-dir=fwd] .fx-cube,.bk[dir=ltr][data-dir=back] .fx-cube{transform-origin:0% 50%;animation:fxCubeR .76s cubic-bezier(.45,.05,.3,1) forwards}
.bk[dir=ltr][data-dir=fwd] .fx-cube,.bk[dir=rtl][data-dir=back] .fx-cube{transform-origin:100% 50%;animation:fxCubeL .76s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes fxCubeR{to{transform:translateX(100%) rotateY(90deg);opacity:.3}}@keyframes fxCubeL{to{transform:translateX(-100%) rotateY(-90deg);opacity:.3}}
.fx-blur{animation:fxBlur .7s ease forwards}
@keyframes fxBlur{to{filter:blur(14px) brightness(1.4);opacity:0;transform:scale(1.04)}}
.bk-page[class*="fx-"]::after{animation:bkShade .76s ease forwards}
/* Projects catalogue pop-up */
.cg{position:fixed;inset:0;z-index:190;display:grid;place-items:center;background:rgba(5,12,26,.86);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.cg.on{opacity:1}.cg[hidden]{display:none}
.cg-in{width:min(1320px,94vw);height:min(90vh,980px);display:flex;flex-direction:column;background:#0f2345;border:1px solid rgba(201,168,98,.35);box-shadow:0 30px 90px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .3s cubic-bezier(.2,.7,.2,1);color:#fff}
.cg.on .cg-in{transform:none}
.cg-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px 10px}
.cg-top h3{margin:0;font-size:clamp(1.4rem,2.4vw,2rem)}
.cg-n{display:block;margin-top:4px;color:#C9A862;font-size:.9rem}
.cg-tabs{display:flex;gap:4px 28px;flex-wrap:wrap;list-style:none;margin:0;padding:6px 28px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.cg-tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:#fff;opacity:.8;font:inherit;font-size:.98rem;padding:8px 2px;cursor:pointer}
.cg-tabs button[aria-pressed="true"]{opacity:1;color:#C9A862;border-bottom-color:#C9A862}
.cg-grid{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;padding:22px 28px 28px;align-content:start;scrollbar-width:thin}
.cg-item{appearance:none;background:none;border:0;padding:0;color:#fff;font:inherit;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.cg-ph{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.06)}
.cg-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cg-item:hover .cg-ph img{transform:scale(1.05)}
.cg-pc{position:absolute;bottom:8px;inset-inline-start:8px;background:rgba(8,20,42,.72);color:#fff;font-size:.75rem;padding:3px 8px}
.cg-item b{font-size:1rem;font-weight:600;margin-top:4px}
.cg-item small{color:rgba(255,255,255,.7);font-size:.85rem}
.cg-item:hover b{color:#C9A862}
.cg button:focus-visible{outline:2px solid #C9A862;outline-offset:3px}
@media (max-width:760px){.cg-in{width:100vw;height:100dvh;border:0}.cg-top,.cg-grid{padding-inline:16px}.cg-tabs{padding-inline:16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.cg-tabs button{white-space:nowrap}.cg-grid{grid-template-columns:1fr 1fr;gap:14px}}
/* ---- Cinematic gallery ---- */
.cn-empty{display:none}
.cn.is-empty .cn-stage>*:not(.cn-empty){visibility:hidden}
.cn.is-empty .cn-empty{display:grid;place-items:center;position:absolute;inset:0;color:var(--ink-soft);font-size:1rem;padding:20px;text-align:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px)}
.cn.is-empty .cn-railnav{visibility:hidden}
.cn-ghost{visibility:hidden}
#p3 .p3-text:empty{display:block}
#p3 .p3-text{min-height:1.7em}
/* stage: sized by JS to the photo's own proportions (no bars); width/height glide between photos */
.cn-stage{position:relative;width:100%;height:clamp(300px,46vw,620px);max-width:100%;margin-inline:auto;border-radius:4px;overflow:hidden;overflow:clip;background:#0b1c38;outline:none;isolation:isolate;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;transition:width .7s cubic-bezier(.2,.7,.2,1),height .7s cubic-bezier(.2,.7,.2,1)}
.cn-stage.dragging{cursor:grabbing}
.cn-stage:focus-visible{box-shadow:0 0 0 2px var(--p3-gold)}
.cn-blur{display:none}
.cn-kb{position:absolute;inset:0;overflow:hidden;animation:cn-kb 18s ease-in-out infinite alternate}
@keyframes cn-kb{from{transform:scale(1)}to{transform:scale(1.045)}}
.cn-stage.dragging .cn-kb,.cn-stage.cine .cn-kb{animation-play-state:paused}
.cn-hero,.cn-next{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;will-change:transform}
.cn-next{visibility:hidden;z-index:1}
/* cinema bars: slide in while the photo is dragged or changing */
.cn-stage::before,.cn-stage::after{content:"";position:absolute;inset-inline:0;height:var(--bar,0%);background:#050b16;z-index:3;pointer-events:none;transition:height .35s ease}
.cn-stage::before{top:0}.cn-stage::after{bottom:0}
.cn-stage.cine{--bar:7%}
.cn-stage.cine::before,.cn-stage.cine::after{transition:height .3s ease}
.cn-stage button{appearance:none;font:inherit;color:#fff;cursor:pointer}
.cn-stage button:focus-visible,.cn-rail button:focus-visible,.cn-rp:focus-visible{outline:2px solid var(--p3-gold);outline-offset:3px}
.cn-zoom{position:absolute;top:16px;inset-inline-end:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(9,22,46,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:9px 14px;font-size:.88rem;z-index:4;transition:border-color .25s,background .25s}
.cn-zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cn-zoom:hover{border-color:var(--p3-gold);background:rgba(9,22,46,.9)}
.cn-count{position:absolute;top:16px;inset-inline-start:16px;background:rgba(9,22,46,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:8px 12px;font-size:.82rem;color:#fff;z-index:4;letter-spacing:.06em}
.cn-pp{position:absolute;top:calc(50% - 26px);width:52px;height:52px;display:grid;place-items:center;background:rgba(9,22,46,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:50%;z-index:4;transition:background .25s,border-color .25s,opacity .25s}
.cn-pp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.cn-pp:hover:not(:disabled){background:var(--p3-gold);border-color:var(--p3-gold);color:#102440}
.cn-pp:disabled{opacity:.3;cursor:default}
.cn-prevp{inset-inline-start:18px}.cn-nextp{inset-inline-end:18px}
[dir=ltr] .cn-pp svg,[dir=ltr] .cn-rp svg{transform:scaleX(-1)}
.cn-info{position:absolute;inset-inline:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;background:linear-gradient(90deg,rgba(9,22,46,.82),rgba(9,22,46,.62));backdrop-filter:blur(8px);border-inline-start:2px solid var(--p3-gold);border-radius:3px;z-index:4;max-width:calc(100% - 36px);transition:opacity .3s}
.cn-stage.dragging .cn-info,.cn-stage.cine .cn-info{opacity:.35}
.cn-cat{color:#fff;font-size:1.08rem;font-weight:600;white-space:nowrap}
.cn-cat::before{content:"";display:inline-block;width:22px;height:1px;background:var(--p3-gold);vertical-align:middle;margin-inline-end:10px}
.cn-thumbs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:68%;padding:2px}
.cn-thumbs button.first:not(:first-child){margin-inline-start:10px;position:relative}
.cn-thumbs button.first:not(:first-child)::before{content:"";position:absolute}
.cn-thumbs::-webkit-scrollbar{display:none}
.cn-thumbs:empty{display:none}
.cn-thumbs button{flex:0 0 auto;width:62px;height:42px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:2px;overflow:hidden;background:none;opacity:.6;transition:opacity .25s,border-color .25s}
.cn-thumbs button[aria-current="true"],.cn-thumbs button:hover{opacity:1;border-color:var(--p3-gold)}
.cn-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.cn-railhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 12px}
.cn-railhead[hidden]{display:none}
.cn-res{color:var(--ink-soft);font-size:.9rem}
.cn-railnav{display:flex;align-items:center;gap:10px}
.cn-rp{appearance:none;width:42px;height:42px;display:grid;place-items:center;background:none;color:var(--ink);border:1px solid rgba(255,255,255,.28);border-radius:2px;cursor:pointer;transition:border-color .25s,color .25s}
.cn-rp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.cn-rp:hover:not(:disabled){border-color:var(--p3-gold);color:var(--p3-gold)}
.cn-rp:disabled{opacity:.3;cursor:default}
.cn-pg{font-size:.85rem;color:var(--ink-soft);direction:ltr;min-width:44px;text-align:center}
.cn{--cn-per:4}
.cn-rail{display:grid;grid-template-columns:repeat(var(--cn-per),minmax(0,1fr));gap:12px}
.cn-rail.slide-f{animation:cn-sf .4s ease}.cn-rail.slide-b{animation:cn-sb .4s ease}
@keyframes cn-sf{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes cn-sb{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
[dir=ltr] .cn-rail.slide-f{animation-name:cn-sb}[dir=ltr] .cn-rail.slide-b{animation-name:cn-sf}
.cn-item{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:start;cursor:pointer}
.cn-ph{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.06);position:relative}
.cn-ph::after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:3px;transition:border-color .25s}
.cn-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .3s;filter:saturate(.8) brightness(.75);-webkit-user-drag:none}
.cn-item:hover .cn-ph img,.cn-item[aria-pressed="true"] .cn-ph img{transform:scale(1.05);filter:none}
.cn-lb{display:flex;justify-content:space-between;align-items:center;padding:10px 2px 8px;font-size:.92rem;border-bottom:2px solid transparent;transition:border-color .25s,color .25s;opacity:.85}
.cn-lb em{font-style:normal;font-size:.78rem;color:var(--ink-soft)}
.cn-item[aria-pressed="true"] .cn-lb{border-bottom-color:var(--p3-gold);color:var(--p3-gold);opacity:1}
.cn-item[aria-pressed="true"] .cn-ph::after{border-color:var(--p3-gold)}
@media (max-width:760px){
  .cn-pp{width:42px;height:42px;top:calc(50% - 21px)}.cn-prevp{inset-inline-start:10px}.cn-nextp{inset-inline-end:10px}
  .cn-zoom{top:10px;inset-inline-end:10px;padding:7px 11px;font-size:.8rem}.cn-count{top:10px;inset-inline-start:10px;padding:6px 9px}
  .cn-info{inset-inline:10px;bottom:10px;max-width:calc(100% - 20px);padding:9px 12px}
  .cn-thumbs{max-width:62%}.cn-thumbs button{width:44px;height:30px}
  .cn-cat{font-size:.95rem}
  .cn-rail{gap:8px}.cn-lb{font-size:.82rem}
  .cn-res{font-size:.8rem}
  #p3 .p3-text{min-height:3.4em}
}
@media (prefers-reduced-motion:reduce){.cn-kb{animation:none}.cn-ph img,.cn-stage{transition:none}}

/* Project data on the stage */
.cn-cat{white-space:normal;display:grid;gap:3px;min-width:0}
.cn-cat b{font-weight:600}
.cn-cat small{display:block;color:rgba(255,255,255,.72);font-size:.82rem;font-weight:400}
.cn-cat .cn-txt{display:block;color:rgba(255,255,255,.85);font-size:.85rem;font-weight:400;max-width:46ch;line-height:1.6}
.cn-cat::before{display:none}
.cn-cat b::before{content:"";display:inline-block;width:22px;height:1px;background:var(--p3-gold);vertical-align:middle;margin-inline-end:10px}
.cn-railhead{justify-content:flex-end}
@media (max-width:600px){.cn-cat small{font-size:.74rem}}

/* The stage's own slides are the only navigation; the project grid below is not shown. */
#p3 .cn-railhead,#p3 .cn-rail{display:none!important}
.cn-cat b{white-space:nowrap}

/* Project names under the sector: the sector branches into its projects */
#p3 .p3-subs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding:2px 0}
#p3 .p3-subs::-webkit-scrollbar{display:none}
#p3 .p3-subs:empty{display:none}
#p3 .p3-subs button{flex:0 0 auto;font:inherit;font-size:.88rem;color:var(--ink-soft);background:transparent;border:1px solid rgba(212,174,98,.35);border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
#p3 .p3-subs button:hover{border-color:var(--p3-gold);color:var(--ink)}
#p3 .p3-subs button[aria-pressed="true"]{background:var(--p3-gold);border-color:var(--p3-gold);color:#102440;font-weight:600}

/* Projects list: a column of picture cards beside the photo; on phones a row of picture cards above it */
#p3 .p3-body{display:grid;grid-template-columns:clamp(190px,22vw,290px) minmax(0,1fr);gap:clamp(12px,2vw,22px);align-items:start}
#p3 .p3-body .p3-grid{min-width:0}
#p3 .p3-subs{display:flex;flex-direction:column;gap:12px;margin:0;padding:2px 6px 2px 2px;overflow-y:auto;overflow-x:hidden;height:var(--sb-h,560px);max-height:var(--sb-h,560px);scrollbar-width:thin;scrollbar-color:rgba(212,174,98,.4) transparent;transition:height .7s cubic-bezier(.2,.7,.2,1)}
#p3 .p3-subs[hidden]{display:none}
#p3 .p3-subs button{position:relative;display:block;flex:0 0 auto;width:100%;aspect-ratio:16/10;padding:0;font:inherit;text-align:start;cursor:pointer;border:1px solid rgba(212,174,98,.22);border-radius:4px;overflow:hidden;background:#0b1c38;transition:border-color .3s,box-shadow .3s}
#p3 .p3-subs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .35s,transform .6s cubic-bezier(.2,.7,.2,1)}
#p3 .p3-subs button:hover img{opacity:.9;transform:scale(1.05)}
#p3 .p3-subs button[aria-pressed="true"]{border-color:var(--p3-gold);box-shadow:0 0 0 1px var(--p3-gold),0 10px 26px rgba(0,0,0,.35)}
#p3 .p3-subs button[aria-pressed="true"] img{opacity:1}
#p3 .p3-subs button::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,34,.9),rgba(6,16,34,.15) 55%,transparent);pointer-events:none}
#p3 .p3-subs .sb-n{position:absolute;top:8px;inset-inline-start:8px;z-index:1;padding:2px 7px;border-radius:2px;background:rgba(6,16,34,.7);color:var(--p3-gold);font-size:.72rem}
#p3 .p3-subs button[aria-pressed="true"] .sb-n{background:var(--p3-gold);color:#102440}
#p3 .p3-subs .sb-t{position:absolute;inset-inline:12px;bottom:10px;z-index:1;display:grid;gap:2px;min-width:0;color:#fff}
#p3 .p3-subs .sb-t b{font-weight:600;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p3 .p3-subs .sb-t small{font-size:.74rem;color:rgba(255,255,255,.75)}
@media (max-width:900px){#p3 .p3-subs .sb-t b{font-size:.86rem}#p3 .p3-subs .sb-t{inset-inline:9px;bottom:7px}}
@media (max-width:640px){
  #p3 .p3-body{display:block}
  #p3 .p3-subs{flex-direction:row;gap:10px;height:auto;max-height:none;overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;margin:0 0 14px;scrollbar-width:none}
  #p3 .p3-subs::-webkit-scrollbar{display:none}
  #p3 .p3-subs button{width:42vw;max-width:190px}
  #p3 .p3-subs .sb-t small{display:none}
}
/* The photo sits right next to the project cards (no empty gap between them) */
#p3 .p3-body .cn-stage{margin-inline-start:0;margin-inline-end:auto}
/* Phones: the project name above, the small photos below it, so they never overlap */
@media (max-width:640px){
  #p3 .cn-info{flex-direction:column;align-items:stretch;gap:8px}
  #p3 .cn-thumbs{max-width:100%}
}
/* 2026-10-26: photos keep their natural proportions (never cropped), on the stage and in the enlarged album */
.cn-hero,.cn-next{object-fit:contain;background:#0b1c38}
.cn-kb{animation:none}
.bk-page img{object-fit:contain}