*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --w:#FAFAF8;--k:#0a0a0a;--g:#6e6e6e;--l:#a8a8a8;
  --r:rgba(10,10,10,.06);
  --serif:'Roboto',system-ui,sans-serif;
  --sans:'Roboto',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--w);color:var(--k);font-family:var(--sans);font-weight:300;font-size:13px;line-height:1.5;overflow-x:hidden;overflow-x:clip;max-width:100vw;overflow-wrap:break-word;word-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button{background:none;border:none;font-family:var(--sans);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;line-height:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;justify-content:center;padding:24px 32px;transition:padding .55s var(--ease)}
nav.on{padding:14px 32px}
.n-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:calc(100% - 40px);padding:0;transition:max-width .55s var(--ease),padding .55s var(--ease),background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),border-radius .55s var(--ease);border-radius:0;background:transparent;position:relative}
nav.on .n-inner{max-width:333px;padding:6px 14px;border-radius:100px;overflow:hidden;
  /* dark smoked glass body — more transparent */
  background:
    /* top specular — tight, bright, liquid feel */
    radial-gradient(120% 40% at 50% 0%, rgba(255,255,255,.14) 0%, transparent 70%),
    /* bottom reflected light — caustic from surface below */
    radial-gradient(100% 50% at 50% 100%, rgba(255,255,255,.04) 0%, transparent 60%),
    /* left edge refraction highlight */
    radial-gradient(15% 80% at 2% 50%, rgba(255,255,255,.06) 0%, transparent 100%),
    /* right edge — dimmer */
    radial-gradient(15% 80% at 98% 50%, rgba(255,255,255,.03) 0%, transparent 100%),
    /* base tint — solid enough for legibility */
    linear-gradient(176deg, rgba(20,20,24,.55) 0%, rgba(12,12,16,.65) 50%, rgba(8,8,12,.58) 100%);
  backdrop-filter:blur(40px) saturate(1.4) brightness(.94);
  -webkit-backdrop-filter:blur(40px) saturate(1.4) brightness(.94);
  /* asymmetric borders — thinner, more subtle */
  border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.16);
  border-bottom-color:rgba(255,255,255,.04);
  box-shadow:
    /* inner top lit edge */
    0 1px 0 0 rgba(255,255,255,.14) inset,
    /* inner glow */
    0 0 20px 0 rgba(255,255,255,.02) inset,
    /* tight contact shadow */
    0 .5px 1px rgba(0,0,0,.08),
    /* mid penumbra */
    0 4px 12px rgba(0,0,0,.07),
    /* large soft shadow */
    0 16px 40px rgba(0,0,0,.07),
    /* ambient */
    0 32px 60px -12px rgba(0,0,0,.05)
}
/* razor specular line across top — the key "liquid" cue */
.n-inner::before{content:'';position:absolute;top:1px;left:14%;right:14%;height:1.5px;border-radius:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 10%,rgba(255,255,255,.4) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.4) 65%,rgba(255,255,255,.08) 90%,transparent 100%);opacity:0;transition:opacity .55s var(--ease);pointer-events:none;z-index:5}
/* soft glow halo beneath specular */
.n-inner::after{content:'';position:absolute;top:0;left:10%;right:10%;height:55%;border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 40%,transparent 100%);opacity:0;transition:opacity .55s var(--ease);pointer-events:none;z-index:4}
nav.on .n-inner::before{opacity:1}
nav.on .n-inner::after{opacity:1}
/* text — white on dark glass, always readable */
nav.on .n-id{color:rgba(255,255,255,.96);font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.4)}
nav.on .n-r a{color:rgba(255,255,255,.6);text-shadow:0 1px 4px rgba(0,0,0,.4);transition:color .3s var(--ease)}
nav.on .n-r a:hover{color:rgba(255,255,255,1)}
nav.on .n-r a.on{color:rgba(255,255,255,.95)}
nav.on .n-r a::after{background:rgba(255,255,255,.7);left:50%;transform:translateX(-50%)}
/* back-wall light spill */
.glass-shine{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .55s var(--ease);
  background:
    /* bottom edge light — light refracting through and hitting surface */
    radial-gradient(80% 30% at 50% 100%, rgba(255,255,255,.06) 0%, transparent 80%),
    /* left edge catch */
    linear-gradient(90deg, rgba(255,255,255,.04) 0%, transparent 6%, transparent 94%, rgba(255,255,255,.02) 100%)
}
nav.on .glass-shine{opacity:1}
.n-id{font-size:7px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;transition:all .45s var(--ease);white-space:nowrap;position:relative;z-index:10}
.n-r{display:flex;gap:17px;list-style:none;position:relative;z-index:10}
.n-r a{font-size:7px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g);position:relative;transition:color .3s var(--ease)}
.n-r a:hover{color:var(--k)}
.n-r a.on{color:var(--k)}
.n-r a::after{content:'';position:absolute;left:50%;bottom:-3px;width:0;height:1px;background:var(--k);transform:translateX(-50%);transition:width .3s var(--ease),background .45s var(--ease)}
.n-r a:hover::after{width:100%}

/* ── Hero ── */
#hero{min-height:100vh;min-height:calc(var(--vh,1vh) * 100);display:flex;flex-direction:column;justify-content:flex-end;padding:0 52px 72px;position:relative}
.h-loc{position:absolute;left:52px;top:50%;font-size:9px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--l);writing-mode:vertical-lr;transform:translateY(-50%) rotate(180deg);opacity:0;animation:fo .7s var(--ease) .9s forwards}
.h-t1{font-family:var(--sans);font-size:clamp(18px,2.2vw,32px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;overflow:hidden}
.h-t1 span{display:block;opacity:0;transform:translateY(106%);animation:su .95s var(--slow) .14s forwards}
.h-t2{font-size:clamp(11px,1.2vw,16px);font-weight:400;letter-spacing:.04em;color:var(--k);margin-top:16px;overflow:hidden}
.h-t2 span{display:block;opacity:0;transform:translateY(106%);animation:su .95s var(--slow) .32s forwards}
.h-t3{font-size:clamp(11px,1.2vw,16px);font-weight:400;letter-spacing:.04em;color:var(--k);text-align:center;position:absolute;bottom:72px;left:0;right:0;overflow:hidden}
.h-t3 span{display:block;opacity:0;transform:translateY(106%);animation:su .95s var(--slow) .5s forwards}
@keyframes fo{to{opacity:1}}
@keyframes su{to{opacity:1;transform:translateY(0)}}

/* ── View Toggle ── */
.view-bar{display:flex;align-items:center;justify-content:space-between;padding:28px 52px 0;margin-top:72px;border-top:1px solid var(--r)}
.vb-l{display:flex;align-items:baseline;gap:12px}
.vb-lbl{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--g)}
.vb-ct{font-size:9px;font-weight:400;letter-spacing:.14em;color:var(--l)}
.vtog{display:flex;gap:2px;background:rgba(10,10,10,.04);border-radius:3px;padding:3px}
.vtog button{padding:7px 20px;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--g);border-radius:2px;transition:all .25s var(--ease)}
.vtog button.on{background:var(--k);color:var(--w)}
.vtog button:hover:not(.on){color:var(--k)}

/* ── Section label (proto only) ── */
.s-label{padding:60px 52px 20px;display:flex;align-items:center;gap:16px}
.s-idx{font-size:9px;font-weight:400;letter-spacing:.2em;color:var(--l)}
.s-tag{font-size:8px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--w);background:var(--k);padding:4px 12px;border-radius:2px}
.s-note{font-size:9px;font-weight:400;letter-spacing:.06em;color:var(--l);margin-left:auto;font-style:italic}

/* ── Shared section / meta — sticky titles ── */
.ps{position:relative;cursor:pointer;padding-bottom:clamp(80px,10vh,120px)}
.ps>[data-block]+[data-block]{margin-top:clamp(8px,1vw,16px)}
.ps-meta{position:sticky;bottom:0;z-index:10;padding:24px 52px 44px;display:flex;justify-content:space-between;align-items:flex-end;mix-blend-mode:difference;pointer-events:none}
.ps-mi{opacity:0;transform:translateY(6px);transition:opacity .55s cubic-bezier(.25,.1,.25,1) .1s,transform .55s cubic-bezier(.25,.1,.25,1) .1s}
.ps.vis .ps-mi{opacity:1;transform:translateY(0)}
.ps-tt{font-family:var(--sans);font-size:clamp(15px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:#fff}
.ps-sb{font-size:9px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:5px}
.ps-arr{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}

/* ── Image cell shared ── */
.ph{width:100%;height:100%;display:block;flex-shrink:0;background:linear-gradient(110deg,#f0f0f0 30%,#fafafa 50%,#f0f0f0 70%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.ph.has-feat-img{animation:none;background:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.pi{overflow:hidden;flex-shrink:0;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--slow) var(--d,0s);will-change:clip-path;min-height:630px;contain:layout style paint}
.pi.r{clip-path:inset(0 0 0% 0);will-change:auto}
.pi .ik{width:100%;height:100%;display:block;transform:scale(1.10);transition:transform 1.7s var(--ease) var(--d,0s)}
.pi.r .ik{transform:scale(1.02);will-change:auto}
.pi.el{clip-path:inset(0 0 0 100%)}.pi.el.r{clip-path:inset(0 0 0 0%)}
.pi.er{clip-path:inset(0 100% 0 0)}.pi.er.r{clip-path:inset(0 0% 0 0)}
.pi.es{clip-path:none!important;opacity:0;transform:translateY(40px) scale(1.04);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--slow) var(--d,0s)}
.pi.es.r{opacity:1;transform:translateY(0) scale(1)}
.pi.ed{clip-path:none!important;opacity:0;transform:rotate(-3deg) translateY(28px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--slow) var(--d,0s)}
.pi.ed.r{opacity:1;transform:rotate(0) translateY(0)}
.a45{aspect-ratio:4/5}.a11{aspect-ratio:1/1}.a43{aspect-ratio:4/3}.a169{aspect-ratio:16/9}

/* ═══ LAYOUT: SPREAD ═══ */
.st-spread{display:grid;grid-template-columns:1.42fr 1fr;gap:4px;padding:0 52px}
.st-spread .pi:first-child{grid-row:1/3}
.st-spread .st-col{display:flex;flex-direction:column;gap:4px}
.st-spread .st-col .pi{min-height:auto}
/* ═══ LAYOUT: FILMSTRIP ═══ */
.st-film{display:flex;gap:4px;padding:0 52px}
.st-film .pi{flex:1;min-height:auto}
/* ═══ LAYOUT: SCATTER ═══ */
.st-scatter{display:flex;gap:4px;padding:0 52px;align-items:flex-start}
.st-scatter .pi{flex:1}
.st-scatter .pi:nth-child(2){margin-top:120px}
.st-scatter .pi:nth-child(3){margin-top:48px}
/* ═══ LAYOUT: DOMINO ═══ */
.st-domino{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 52px}
.st-domino .pi:first-child{grid-row:1/3}
.st-domino .st-col{display:flex;flex-direction:column;gap:4px}
.st-domino .st-col .pi{min-height:auto}
/* ═══ LAYOUT: MAGAZINE ═══ */
.st-mag{display:flex;flex-direction:column;gap:4px;padding:0 52px}
.st-mag>.pi:first-child{margin:0 -52px;width:calc(100% + 104px);max-width:none}
.st-mag>.pi:first-child .ik.ph.has-feat-img img{object-fit:cover!important}
.st-mag .st-row{display:flex;gap:4px}
.st-mag .st-row .pi{flex:1;min-height:auto}
/* ═══ LAYOUT: OVERLAP ═══ */
.st-overlap{display:flex;padding:0 52px;position:relative}
.st-overlap .pi{flex:1}
.st-overlap .pi:nth-child(2){margin-left:-72px;margin-top:80px;z-index:2}
.st-overlap .pi:nth-child(3){margin-left:-36px;margin-top:28px}
/* ═══ LAYOUT: TRIO ═══ */
.st-trio{display:flex;gap:4px;padding:0 52px;align-items:center}
.st-trio .pi:nth-child(1){flex:.78;margin-top:100px}
.st-trio .pi:nth-child(2){flex:1.44}
.st-trio .pi:nth-child(3){flex:.78;margin-top:60px}
/* ═══ LAYOUT: FEATURE ═══ */
.st-feature{display:flex;flex-direction:column;gap:4px}
.st-feature .pi:first-child{width:100%}
.st-feature .st-row{display:flex;gap:4px;padding:0 52px}
.st-feature .st-row .pi{flex:1;min-height:auto}

/* ═══ NEW: MARQUEE ═══ */
.st-marquee{overflow-x:auto;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.st-marquee::-webkit-scrollbar{display:none}
.st-marquee.dragging{cursor:grabbing}
.st-marquee.dragging .mq-track{animation-play-state:paused}
.mq-track{display:flex;gap:6px;width:max-content;animation:mq var(--dur,80s) linear infinite}
.mq-item{flex:0 0 auto;height:calc(100vh - 180px);height:calc(var(--vh,1vh) * 100 - 180px);overflow:hidden;position:relative}
.mq-item.land{aspect-ratio:16/10;width:auto}
.mq-item.port{aspect-ratio:3/4;width:auto}
.mq-item.sq{aspect-ratio:1/1;width:auto}
.mq-item .ik{height:100%;width:100%;display:block;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.mq-item:hover .ik{transform:scale(1.0)}
.mq-item::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,0);transition:background .4s var(--ease)}
.st-marquee:hover .mq-item::after{background:rgba(10,10,10,.08)}
.st-marquee:hover .mq-item:hover::after{background:rgba(10,10,10,0)}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.mq-track.mq-rev{animation-direction:reverse}

/* ═══ NEW: CINEMATIC ═══ */
.st-cinema{position:relative;width:100%;overflow:hidden}
.st-cinema .pi{width:100%;aspect-ratio:2.35/1;min-height:42vw;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--slow)}
.st-cinema .pi.r{clip-path:inset(0)}
.st-cinema .pi .ik{transform:scale(1.08);transition:transform 10s linear}
.st-cinema .pi.r .ik{transform:scale(1.0)}
.cin-ov{position:absolute;bottom:0;left:0;right:0;padding:48px 52px;background:linear-gradient(to top,rgba(10,10,10,.55),transparent);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.cin-ov .ps-tt{color:#fff;font-size:clamp(18px,2.6vw,38px);font-family:var(--sans)}.cin-ov .ps-sb{color:rgba(255,255,255,.45)}

/* ═══ NEW: STACKED ═══ */
.st-stack{position:relative;height:clamp(780px,72vh,920px);padding:0 52px}
.st-stack .pi{position:absolute;overflow:hidden;box-shadow:0 12px 48px rgba(10,10,10,.14);clip-path:none!important;opacity:0;transform:translateY(50px) rotate(-2deg);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--slow) var(--d,0s);min-height:auto}
.st-stack .pi.r{opacity:1;transform:translateY(0) rotate(0)}
.st-stack .pi:nth-child(1){width:44%;aspect-ratio:4/5;left:52px;top:0;z-index:3}
.st-stack .pi:nth-child(2){width:30%;aspect-ratio:3/4;right:52px;top:60px;z-index:2;--d:.18s}
.st-stack .pi:nth-child(3){width:22%;aspect-ratio:1/1;left:40%;top:50%;z-index:4;--d:.34s}
.st-stack .pi .ik{transform:scale(1)!important;transition:transform .6s var(--ease)!important}
.st-stack .pi:hover .ik{transform:scale(1.04)!important}

/* ═══ NEW: MOSAIC ═══ */
/* Orientation-aware: images get .land or .port class from CMS metadata */
/* Grid auto-arranges based on what's uploaded */
.st-mosaic{display:grid;grid-template-columns:9fr 16fr 9fr;grid-template-rows:auto auto;gap:4px;padding:0 52px}
.st-mosaic .pi{min-height:auto}
.st-mosaic .pi.land{aspect-ratio:16/9}
.st-mosaic .pi.port{aspect-ratio:9/16}
.st-mosaic .pi.sq{aspect-ratio:1/1}
/* first item spans both rows if portrait */
.st-mosaic .pi:first-child.port{grid-row:1/3}
/* wide item spans 2 cols if landscape */
.st-mosaic .pi.land.wide{grid-column:span 2}

/* ═══ NEW: FLOAT ═══ */
.st-float{position:relative;width:100%;height:132vh;min-height:900px;max-height:1400px;overflow:hidden;background:var(--bg);cursor:default}
.st-float .fl-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,0);transition:background .5s var(--ease);pointer-events:none;z-index:50}
.st-float.has-focus .fl-overlay{background:rgba(10,10,10,.6);pointer-events:auto;cursor:pointer}
.st-float .fl-item{position:absolute;overflow:hidden;box-shadow:0 8px 40px rgba(10,10,10,.12);will-change:transform;cursor:grab;transition:box-shadow .4s var(--ease),width .55s var(--ease),height .55s var(--ease)}
.st-float .fl-item.dragging{cursor:grabbing;box-shadow:0 16px 64px rgba(10,10,10,.28);z-index:200!important}
.st-float .fl-item:hover{box-shadow:0 12px 56px rgba(10,10,10,.22);z-index:10!important}
.st-float .fl-item .ik{width:100%;height:100%;object-fit:cover}
.st-float .fl-item.land{width:620px;height:413px}
.st-float .fl-item.port{width:430px;height:610px}
.st-float .fl-item.sq{width:480px;height:480px}
.st-float .fl-item.fl-focus{z-index:100!important;box-shadow:0 24px 80px rgba(10,10,10,.3);cursor:default}

/* ═══ NEW: CAROUSEL (momentum) ═══ */
.st-carousel{overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;cursor:grab}
.st-carousel.dragging{cursor:grabbing}
.st-carousel .cr-track{display:flex;gap:5px;padding:0 52px;will-change:transform}
.st-carousel .cr-item{flex:0 0 auto;height:clamp(580px,42vh,680px);overflow:hidden;position:relative}
.st-carousel .cr-item.land{aspect-ratio:16/10;width:928px}
.st-carousel .cr-item.port{aspect-ratio:3/4;width:435px}
.st-carousel .cr-item.sq{aspect-ratio:1/1;width:580px}
.st-carousel .cr-item .ik{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease)}
.st-carousel .cr-item:hover .ik{transform:scale(1.0)}
.st-carousel .cr-item::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,0);transition:background .4s var(--ease)}
.st-carousel:hover .cr-item::after{background:rgba(10,10,10,.06)}
.st-carousel:hover .cr-item:hover::after{background:rgba(10,10,10,0)}

/* ═══ NEW: FULL BLEED — single oversized image, edge to edge, no padding ═══ */
.st-fullbleed{position:relative;width:100%;overflow:hidden}
.st-fullbleed .pi{width:100%;min-height:auto;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--slow)}
.st-fullbleed .pi.r{clip-path:inset(0)}
.st-fullbleed .pi .ik{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.04);transition:transform 8s linear}
.st-fullbleed .pi.r .ik{transform:scale(1.0)}
/* CMS-selectable aspect ratio — default 1:1, can also be 4:5, 3:2, 16:9 */
.st-fullbleed .fb-1x1{aspect-ratio:1/1;min-height:100vw}
.st-fullbleed .fb-4x5{aspect-ratio:4/5;min-height:125vw}
.st-fullbleed .fb-3x2{aspect-ratio:3/2;min-height:66.67vw}
.st-fullbleed .fb-16x9{aspect-ratio:16/9;min-height:56.25vw}
/* subtle vignette */
.st-fullbleed::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(10,10,10,.06) 100%);pointer-events:none;z-index:1}

/* ═══ NEW: VIDEO PLAYER ═══ */
.st-video{position:relative;width:100%;aspect-ratio:16/9;min-height:56.25vw;background:#000;overflow:hidden;cursor:pointer}
.st-video .ik{width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.st-video .vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease);z-index:3}
.st-video:hover .vid-play{background:rgba(255,255,255,.25);transform:translate(-50%,-50%) scale(1.08)}
.st-video .vid-play::after{content:'';width:0;height:0;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #fff;margin-left:3px}
.st-video .vid-bar{position:absolute;bottom:0;left:0;right:0;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 100%);z-index:2;opacity:0;transition:opacity .35s var(--ease)}
.st-video:hover .vid-bar{opacity:1}
.st-video .vid-progress{flex:1;height:2px;background:rgba(255,255,255,.2);border-radius:1px;margin:0 20px;position:relative;overflow:hidden}
.st-video .vid-progress::after{content:'';position:absolute;left:0;top:0;bottom:0;width:35%;background:#fff;border-radius:1px}
.st-video .vid-time{font-size:10px;font-weight:400;letter-spacing:.1em;color:rgba(255,255,255,.6);white-space:nowrap}
.st-video .vid-ov{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 30%,transparent 80%,rgba(0,0,0,.15) 100%);z-index:1}

/* ═══ GRID VIEW ═══ */
#grid-view{display:none}
/* ── Layout 018: FLASH (rapid image cycle) ── */
.st-flash{position:relative;width:100%;height:150vh;height:calc(var(--vh,1vh) * 150);background:#0a0a0a;overflow:hidden}
.st-flash .fl-frame{position:absolute;opacity:0;will-change:opacity}
.st-flash .fl-frame.on{opacity:1}
.st-flash .fl-frame .ik{width:100%;height:100%;display:block}

/* ── Split-scroll projects view ── */
.split-wrap{position:sticky;top:0;height:100vh;display:flex;overflow:hidden}
.split-col{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;transition:flex .55s cubic-bezier(.25,.1,.25,1),opacity .4s ease}
.split-col::-webkit-scrollbar{display:none}
/* hover: expand active column, contract + dim the other */
.split-wrap.col-hover .split-col{flex:.4;opacity:.55}
.split-wrap.col-hover .split-col.is-active{flex:.6;opacity:1}
/* item cells — varied aspect ratios assigned via inline style */
.split-col .sp-item{position:relative;overflow:hidden;cursor:pointer}
.sp-item .ik{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.sp-item:hover .ik{transform:scale(1.04)}
/* overlay info */
.sp-ov{position:absolute;bottom:0;left:0;right:0;padding:24px;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 60%,transparent 100%);opacity:0;transition:opacity .35s var(--ease);display:flex;flex-direction:column;justify-content:flex-end}
.sp-item:hover .sp-ov{opacity:1}
.sp-ov .sp-t{font-family:var(--sans);font-size:15px;font-weight:500;color:#fff;line-height:1.3}
.sp-ov .sp-s{font-size:8px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:5px}
.split-col-l{border-right:1px solid var(--r)}
.split-col .sp-item+.sp-item{border-top:1px solid var(--r)}
/* scroll reveal */
.sp-item{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sp-item.sp-vis{opacity:1;transform:translateY(0)}
/* counter */
.split-counter{position:absolute;top:16px;right:24px;font-size:9px;font-weight:400;letter-spacing:.2em;color:var(--l);z-index:2}

/* ── Index Grid ── */
#index-view{padding:24px 52px 120px}
.idx-grid{columns:4;column-gap:16px}
.idx-item{break-inside:avoid;margin-bottom:16px;cursor:pointer;position:relative;overflow:hidden}
.idx-item:hover .idx-thumb .ik{transform:scale(1.03);transition:transform .4s var(--ease)}
.idx-item:hover .idx-t{color:var(--k)}
.idx-thumb{width:100%;overflow:hidden;background:var(--e)}
.idx-thumb .ik{width:100%;height:100%;transition:transform .4s var(--ease)}
.idx-info{padding:10px 0 6px}
.idx-t{font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--k);transition:color .3s var(--ease);line-height:1.3}
.idx-s{font-size:9px;font-weight:400;letter-spacing:.04em;color:var(--g);margin-top:3px}

/* ── Divider ── */
.divider{width:calc(100% - 104px);height:1px;background:var(--r);margin:48px 52px}
/* ── About ── */
#about{padding:140px 52px;display:grid;grid-template-columns:1fr 1fr;gap:72px 100px;border-top:1px solid var(--r)}
.ak{font-size:9px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--g);margin-bottom:30px}
.as{font-family:var(--sans);font-size:clamp(20px,2.6vw,38px);font-weight:400;line-height:1.28;letter-spacing:-.01em}
.as em{font-style:normal;font-weight:700;color:var(--k)}
.ab-p,.ab-body p{font-size:12px;font-weight:300;line-height:1.9;color:#555;letter-spacing:.01em;max-width:510px;margin-bottom:18px}
.acl{font-size:9px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--l);line-height:2.4;margin-top:26px;max-width:510px}
.rev{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.v{opacity:1;transform:translateY(0)}
/* ── Contact ── */
#contact{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;background:var(--k);color:var(--w);display:flex;flex-direction:column;min-height:100vh;min-height:calc(var(--vh,1vh) * 100);justify-content:center;padding:120px 52px 80px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:translateY(100%);pointer-events:none;transition:transform .7s cubic-bezier(.76,0,.24,1)}
#contact::-webkit-scrollbar{display:none}
#contact.open{transform:translateY(0);pointer-events:auto}
/* close button */
.ct-close{position:fixed;top:32px;right:40px;z-index:510;display:flex;align-items:center;gap:8px;cursor:pointer;color:rgba(255,255,255,.5);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;transition:color .3s var(--ease);opacity:0;pointer-events:none}
.ct-close.on{opacity:1;pointer-events:auto}
.ct-close:hover{color:#fff}
.ct-close svg{width:16px;height:16px}
.ct-inner{max-width:640px;width:100%}
.ct-label{font-size:9px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:24px}
.ct-heading{font-size:clamp(28px,4vw,52px);font-weight:400;line-height:1.2;letter-spacing:-.01em;margin-bottom:16px}
.ct-sub{font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.65);margin-bottom:56px;max-width:480px}
.ct-form{display:flex;flex-direction:column;gap:0}
.ct-field{position:relative;border-bottom:1px solid rgba(255,255,255,.1);transition:border-color .3s var(--ease)}
.ct-field:focus-within{border-color:rgba(255,255,255,.4)}
.ct-field label{position:absolute;top:18px;left:0;font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);pointer-events:none;transition:all .25s var(--ease)}
.ct-field input,.ct-field textarea{width:100%;background:none;border:none;outline:none;color:var(--w);font-family:var(--sans);font-size:14px;font-weight:300;padding:16px 0;letter-spacing:.02em;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}
.ct-field textarea{min-height:120px;line-height:1.7}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:transparent}
.ct-field input:focus + label,.ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label,.ct-field textarea:not(:placeholder-shown) + label{top:2px;font-size:8px;color:rgba(255,255,255,.6)}
.ct-row{display:flex;gap:0}
.ct-row .ct-field{flex:1}
.ct-row .ct-field:first-child{border-right:1px solid rgba(255,255,255,.06);padding-right:24px}
.ct-row .ct-field:last-child{padding-left:24px}
.ct-submit{margin-top:48px;display:flex;align-items:center;justify-content:space-between}
.ct-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.2);color:var(--w);padding:14px 32px;border-radius:100px;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .3s var(--ease)}
.ct-btn:hover{background:var(--w);color:var(--k);border-color:var(--w)}
.ct-btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.ct-btn:hover svg{transform:translateX(4px)}
.ct-links{display:flex;gap:24px}
.cl{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);transition:color .22s;position:relative}
.cl:hover{color:var(--w)}
.cl::after{content:'';position:absolute;left:50%;bottom:-3px;width:0;height:1px;background:rgba(255,255,255,.5);transform:translateX(-50%);transition:width .3s var(--ease)}
.cl:hover::after{width:100%}
/* ── Contact Page (standalone) ── */
.contact-page{background:var(--k);color:var(--w);min-height:100vh;display:flex;flex-direction:column}
.contact-page .ct-inner{max-width:640px;width:100%;margin:0 auto;padding:160px 52px 80px;flex:1;display:flex;flex-direction:column;justify-content:center}
footer{background:var(--k);padding:22px 52px;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.05)}
footer p{font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.14)}
footer a{color:rgba(255,255,255,.14);text-decoration:none;transition:color .3s var(--ease)}
footer a:hover{color:rgba(255,255,255,.4)}
/* ── Proto banner ── */
.proto-b{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:999;background:var(--k);color:var(--w);padding:8px 22px;border-radius:100px;font-size:8px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;opacity:.65}

/* ═══ PROJECT DETAIL — OVERLAY PANEL ═══ */
/* Main overlay slides up from bottom */
#proj-detail{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;pointer-events:none;transform:translateY(100%);overflow-y:auto;overflow-x:hidden;background:var(--w);scrollbar-width:none;-ms-overflow-style:none;transition:transform .7s cubic-bezier(.76,0,.24,1)}
#proj-detail::-webkit-scrollbar{display:none}
#proj-detail.open{pointer-events:auto;transform:translateY(0)}
/* dark scrim behind overlay */
.pj-scrim{position:fixed;top:0;left:0;right:0;bottom:0;z-index:499;background:rgba(10,10,10,0);pointer-events:none;transition:background .6s var(--ease)}
.pj-scrim.on{background:rgba(10,10,10,.4);pointer-events:auto}

/* close bar — sticky, overlaps hero via negative margin */
/* project nav — clear glass pill, fixed, fades in after page loads */
.pj-nav{position:fixed;top:0;left:0;right:0;z-index:520;display:flex;justify-content:center;padding:14px 32px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .45s var(--ease), transform .45s var(--ease)}
.pj-nav.on{opacity:1;transform:translateY(0);pointer-events:auto}
.pj-nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:333px;padding:5px 12px;border-radius:100px;
  /* clear glass — visible enough for text legibility */
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255,255,255,.16) 0%, transparent 70%),
    radial-gradient(100% 50% at 50% 100%, rgba(255,255,255,.04) 0%, transparent 60%),
    radial-gradient(15% 80% at 2% 50%, rgba(255,255,255,.07) 0%, transparent 100%),
    radial-gradient(15% 80% at 98% 50%, rgba(255,255,255,.03) 0%, transparent 100%),
    linear-gradient(176deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.10) 100%);
  backdrop-filter:blur(40px) saturate(1.3) brightness(1.04);
  -webkit-backdrop-filter:blur(40px) saturate(1.3) brightness(1.04);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.22);
  border-bottom-color:rgba(255,255,255,.05);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.18) inset,
    0 0 20px 0 rgba(255,255,255,.03) inset,
    0 .5px 1px rgba(0,0,0,.04),
    0 4px 12px rgba(0,0,0,.04),
    0 16px 40px rgba(0,0,0,.04);
  position:relative;overflow:hidden}
/* razor specular — slightly brighter on clear glass */
.pj-nav-inner::before{content:'';position:absolute;top:1px;left:14%;right:14%;height:1.5px;border-radius:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 10%,rgba(255,255,255,.45) 35%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.45) 65%,rgba(255,255,255,.1) 90%,transparent 100%);pointer-events:none;z-index:5}
.pj-nav-back{display:flex;align-items:center;gap:4px;cursor:pointer;color:rgba(0,0,0,.75);font-size:7px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;text-shadow:0 1px 3px rgba(255,255,255,.4);transition:color .3s var(--ease)}
.pj-nav-back:hover{color:rgba(0,0,0,1)}
.pj-nav-back svg{width:10px;height:10px}
.pj-nav-title{font-size:7px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;text-align:center;flex:1;padding:0 11px}
.pj-nav-links{display:flex;gap:14px;flex-shrink:0}
.pj-nav-links a{font-size:7px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.55);cursor:pointer;text-decoration:none;text-shadow:0 1px 3px rgba(255,255,255,.4);position:relative;transition:color .3s var(--ease)}
.pj-nav-links a::after{content:'';position:absolute;left:50%;bottom:-3px;width:0;height:1px;background:rgba(0,0,0,.5);transform:translateX(-50%);transition:width .3s var(--ease)}
.pj-nav-links a:hover{color:rgba(0,0,0,1)}
.pj-nav-links a:hover::after{width:100%}
/* when over dark content (viewer templates), switch to light text */
.pj-nav.on-dark .pj-nav-back{color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pj-nav.on-dark .pj-nav-back:hover{color:#fff}
.pj-nav.on-dark .pj-nav-title{color:rgba(255,255,255,.6)}
.pj-nav.on-dark .pj-nav-links a{color:rgba(255,255,255,.6);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pj-nav.on-dark .pj-nav-links a::after{background:rgba(255,255,255,.6)}
.pj-nav.on-dark .pj-nav-links a:hover{color:#fff}
.pj-nav.on-dark .pj-nav-inner{
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 70%),
    radial-gradient(100% 50% at 50% 100%, rgba(255,255,255,.03) 0%, transparent 60%),
    radial-gradient(15% 80% at 2% 50%, rgba(255,255,255,.06) 0%, transparent 100%),
    radial-gradient(15% 80% at 98% 50%, rgba(255,255,255,.03) 0%, transparent 100%),
    linear-gradient(176deg, rgba(20,20,24,.35) 0%, rgba(12,12,16,.45) 50%, rgba(8,8,12,.40) 100%);
  backdrop-filter:blur(36px) saturate(1.4) brightness(.94);
  -webkit-backdrop-filter:blur(36px) saturate(1.4) brightness(.94);
  border-color:rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.04)}
/* main nav hide state */
nav.nav-hidden{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
/* (close-btn replaced by pj-nav) */

/* project hero */
.pj-hero{width:100%;height:85vh;position:relative;overflow:hidden}
.pj-hero .ik{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 8s linear}
#proj-detail.open .pj-hero .ik{transform:scale(1)}
.pj-hero-ov{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(10,10,10,.5) 0%,transparent 35%,transparent 75%,rgba(10,10,10,.12) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:0 52px 64px}
.pj-hero-title{font-size:clamp(28px,4.5vw,56px);font-weight:400;color:#fff;line-height:1.1;letter-spacing:-.01em;opacity:0;transform:translateY(24px);transition:all .7s var(--ease) .3s}
.pj-hero-sub{font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:14px;opacity:0;transform:translateY(16px);transition:all .6s var(--ease) .42s}
#proj-detail.open .pj-hero-title,
#proj-detail.open .pj-hero-sub{opacity:1;transform:translateY(0)}

/* floating info button — always available on project pages */
.pj-info-fab{position:fixed;bottom:32px;right:52px;z-index:515;display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;background:rgba(10,10,10,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);cursor:pointer;opacity:0;transform:translateY(12px);transition:all .4s var(--ease);pointer-events:none}
.pj-info-fab.on{opacity:1;transform:translateY(0);pointer-events:auto}
.pj-info-fab:hover{background:rgba(10,10,10,.85);border-color:rgba(255,255,255,.18)}
.pj-info-fab span{font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pj-info-fab .fab-line{width:16px;height:1px;background:rgba(255,255,255,.4);transition:width .3s var(--ease)}
.pj-info-fab:hover .fab-line{width:22px}
.pj-info-fab:hover span{color:#fff}

/* ── Info drawer — slides in from right ── */
.pj-drawer{position:fixed;top:0;right:0;bottom:0;width:85vw;max-width:480px;z-index:550;background:var(--w);transform:translateX(100%);transition:transform .55s cubic-bezier(.76,0,.24,1);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pj-drawer::-webkit-scrollbar{display:none}
.pj-drawer.open{transform:translateX(0)}
.pj-drawer-scrim{position:fixed;top:0;left:0;right:0;bottom:0;z-index:540;background:rgba(10,10,10,0);pointer-events:none;transition:background .45s var(--ease)}
.pj-drawer-scrim.on{background:rgba(10,10,10,.35);pointer-events:auto}
.pj-drawer-close{position:absolute;top:28px;right:28px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g);transition:color .2s;z-index:2}
.pj-drawer-close:hover{color:var(--k)}
.pj-drawer-close svg{width:20px;height:20px}
#pj-drawer-content{padding:88px 44px 64px;display:flex;flex-direction:column;gap:0}
.pj-drawer-header{margin-bottom:36px}
.pj-drawer-title{font-size:clamp(20px,2.5vw,30px);font-weight:400;line-height:1.25;letter-spacing:-.01em}
.pj-drawer-sub{font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--l);margin-top:10px}
.pj-drawer-section{padding:28px 0;border-top:1px solid var(--r)}
.pj-drawer-section-label{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--l);margin-bottom:16px}
.pj-drawer-desc{font-size:13px;font-weight:300;line-height:1.8;color:var(--g)}
.pj-drawer-tags{display:flex;flex-wrap:wrap;gap:8px}
.pj-tag{font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--g);padding:6px 14px;border-radius:100px;border:1px solid var(--r);transition:border-color .2s}
.pj-drawer-credits{display:flex;flex-direction:column;gap:0}
.pj-drawer-credits .pj-credit{border-bottom:1px solid var(--r)}
.pj-drawer-credits .pj-credit:last-child{border-bottom:none}
.pj-credit{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0}
.pj-credit:first-child{padding-top:0}
.pj-credit:last-child{padding-bottom:0}
.pj-credit-label{font-size:10px;font-weight:300;letter-spacing:.04em;color:var(--l);white-space:nowrap;flex-shrink:0}
.pj-credit-val{font-size:10px;font-weight:500;letter-spacing:.02em;color:var(--k);text-align:right}

/* project gallery */
.pj-gallery{padding:60px 52px 0;display:flex;flex-direction:column;gap:5px}
.pj-gal-row{display:flex;gap:5px}
.pj-gal-full{width:100%}
.pj-gal-half{flex:1}
.pj-gal-third{flex:1}
.pj-gal-two-third{flex:2}
.pj-gal-img{width:100%;overflow:hidden;position:relative}
.pj-gal-img .ik{width:100%;display:block;aspect-ratio:var(--ar,16/10);object-fit:cover}
.pj-gal-img .ph{aspect-ratio:var(--ar,16/10)}
.pj-gal-img{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pj-gal-img.vis{opacity:1;transform:translateY(0)}

/* related projects */
.pj-related{padding:120px 52px 80px}
.pj-related-label{font-size:9px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--l);margin-bottom:40px}
.pj-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pj-related-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:4/5}
.pj-related-item .ik{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-related-item:hover .ik{transform:scale(1.05)}
.pj-related-ov{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,0);transition:background .35s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px}
.pj-related-item:hover .pj-related-ov{background:rgba(10,10,10,.45)}
.pj-related-ov span{color:#fff;opacity:0;transform:translateY(8px);transition:all .3s var(--ease)}
.pj-related-item:hover .pj-related-ov span{opacity:1;transform:translateY(0)}
.pj-related-ov .ri-t{font-size:14px;font-weight:300}
.pj-related-ov .ri-s{font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:4px}

/* project footer */
.pj-more{padding:80px 52px 0;border-top:1px solid var(--r)}
.pj-more-label{font-size:9px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--l);margin-bottom:40px}
.pj-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.pj-more-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:4/5}
.pj-more-item .ik{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-more-item:hover .ik{transform:scale(1.05)}
.pj-more-ov{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,0);transition:background .35s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px}
.pj-more-item:hover .pj-more-ov{background:rgba(10,10,10,.45)}
.pj-more-ov span{color:#fff;opacity:0;transform:translateY(8px);transition:all .3s var(--ease)}
.pj-more-item:hover .pj-more-ov span{opacity:1;transform:translateY(0)}
.pj-more-ov .mi-t{font-size:14px;font-weight:300}
.pj-more-ov .mi-s{font-size:9px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:4px}
.pj-foot{padding:60px 52px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--r)}
.pj-foot-nav{display:flex;gap:40px}
.pj-foot-nav a{font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--g);transition:color .2s}
/* Dark project overrides */
#proj-detail.proj-dark .pj-more{border-top-color:rgba(255,255,255,.1)}
#proj-detail.proj-dark .pj-more-label{color:rgba(255,255,255,.4)}
#proj-detail.proj-dark .pj-foot{border-top-color:rgba(255,255,255,.1)}
#proj-detail.proj-dark .pj-foot-nav a{color:rgba(255,255,255,.45)}
#proj-detail.proj-dark .pj-foot p{color:rgba(255,255,255,.25)!important}
#proj-detail.proj-dark .pj-foot-nav a:hover{color:#fff}
.pj-foot-nav a:hover{color:var(--k)}

/* ═══ PROJECT PAGE TEMPLATES ═══ */

/* ── Shared: media items ── */
.media-item{overflow:hidden;position:relative}
.media-item .ik{width:100%;height:100%;object-fit:cover}
.media-item.is-video .vid-indicator{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:2}
.media-item.is-video .vid-indicator::after{content:'';width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18)}
.media-item.is-video .vid-indicator::before{content:'';position:absolute;width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent rgba(255,255,255,.85);z-index:3}
.media-item.is-video .vid-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
.media-item.is-video .vid-bar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:35%;background:rgba(255,255,255,.25);border-radius:0 2px 2px 0}
/* video fullscreen button */
.media-item.is-video .vid-fs{position:absolute;bottom:12px;right:12px;z-index:4;width:32px;height:32px;border-radius:6px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease)}
.media-item.is-video:hover .vid-fs{opacity:1}
.media-item.is-video .vid-fs svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);stroke-width:1.5;fill:none}
.media-item.is-video .vid-fs:hover{background:rgba(0,0,0,.65)}
.media-item.is-video .vid-fs:hover svg{stroke:#fff}

/* ── TEMPLATE: EDITORIAL (split-screen + gallery below) ── */
.tpl-editorial{min-height:100vh;min-height:calc(var(--vh,1vh) * 100)}
.tpl-ed-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:calc(var(--vh,1vh) * 100)}
.tpl-ed-split .tpl-img-col{position:sticky;top:0;height:100vh;height:calc(var(--vh,1vh) * 100);overflow:hidden}
.tpl-ed-split .tpl-img-col .ik{width:100%;height:100%;object-fit:cover}
.tpl-ed-split .tpl-text-col{padding:120px 52px 80px 52px;display:flex;flex-direction:column;gap:48px}
.tpl-editorial .tpl-title{font-size:clamp(24px,3vw,40px);font-weight:300;line-height:1.15;letter-spacing:-.01em}
.tpl-editorial .tpl-meta{font-size:9px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--l)}
.tpl-editorial .tpl-body{font-size:14px;font-weight:300;line-height:1.8;color:var(--g)}
.tpl-editorial .tpl-pullquote{font-size:clamp(20px,2.4vw,32px);font-weight:300;line-height:1.35;font-style:italic;color:var(--k);padding:32px 0;border-top:1px solid var(--r);border-bottom:1px solid var(--r)}
.tpl-editorial .tpl-credits{display:flex;flex-direction:column;gap:0;margin-top:8px}
/* editorial gallery: mixed rows below the split */
.tpl-ed-gallery{padding:4px 0}
.tpl-ed-row{display:flex;gap:4px;margin-bottom:4px}
.tpl-ed-row .media-item{flex:1;min-height:0}
.tpl-ed-row .media-item.landscape{aspect-ratio:3/2}
.tpl-ed-row .media-item.portrait{aspect-ratio:2/3}
.tpl-ed-row .media-item.square{aspect-ratio:1/1}
/* single landscape = full width cinematic */
.tpl-ed-row.row-1-l .media-item{aspect-ratio:21/9}
/* single portrait = centered with breathing room */
.tpl-ed-row.row-1-p{justify-content:center}
.tpl-ed-row.row-1-p .media-item{flex:0 0 45%;aspect-ratio:2/3}
/* video rows are always full width */
.tpl-ed-row.row-video .media-item{aspect-ratio:16/9;flex:1}

/* ── TEMPLATE: LOOKBOOK (horizontal scroll, orientation-aware) ── */
/* ── TEMPLATE: IMMERSIVE (full-viewport stacking) ── */
/* Both now use a shared fullbleed single-frame viewer */

.tpl-viewer{position:relative;width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);overflow:hidden;background:var(--k);cursor:pointer}
.tpl-viewer.has-footer{height:auto;min-height:100vh;min-height:calc(var(--vh,1vh) * 100)}
.tv-frame{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .55s var(--ease);z-index:1;pointer-events:none}
.tv-frame .ik{width:100%;height:100%;object-fit:cover}
.tv-frame.portrait .ik{object-fit:contain}
.tv-frame.active{opacity:1;z-index:2;pointer-events:auto}
/* video inside frames */
.tv-frame.is-video .vid-indicator{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:3}
.tv-frame.is-video .vid-indicator::after{content:'';width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15)}
.tv-frame.is-video .vid-indicator::before{content:'';position:absolute;width:0;height:0;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent rgba(255,255,255,.85);z-index:4}
.tv-frame.is-video:hover .vid-fs{opacity:1!important}
.tv-frame.is-video .vid-fs svg{width:14px;height:14px;stroke:rgba(255,255,255,.7);stroke-width:1.5;fill:none}
/* hero text on first frame */
.tv-hero-text{position:absolute;bottom:72px;left:52px;z-index:5;pointer-events:none}
.tv-hero-text h1{font-size:clamp(32px,5vw,64px);font-weight:300;color:#fff;line-height:1.08;letter-spacing:-.01em}
.tv-hero-text p{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:16px}
/* captions */
.tv-caption{position:absolute;bottom:40px;left:52px;right:52px;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.tv-caption .tv-cap-text{font-size:12px;font-weight:300;color:rgba(255,255,255,.6);max-width:400px;line-height:1.6}
.tv-caption .tv-cap-num{font-size:9px;font-weight:400;letter-spacing:.22em;color:rgba(255,255,255,.3)}
/* click zones */
.tv-zone{position:absolute;top:0;bottom:0;z-index:6;cursor:pointer}
.tv-zone-prev{left:0;width:40%}
.tv-zone-next{right:0;width:60%}
/* counter */
.tv-counter{position:absolute;bottom:32px;left:52px;font-size:9px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;z-index:8;color:#fff;mix-blend-mode:difference}
/* progress bar */
.tv-progress{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:8;background:rgba(255,255,255,.08)}
.tv-progress-fill{height:100%;background:rgba(255,255,255,.35);transition:width .55s var(--ease)}
/* progress dots (immersive variant) */

/* ── TEMPLATE: SCATTERED (floating images, scrollable field) ── */
.tpl-scattered{position:relative;width:100%;min-height:300vh;background:#0a0a0a;overflow:hidden}
.tpl-scattered .sc-field{position:relative;width:100%;padding:40px 0 120px}
.tpl-scattered .sc-img{position:absolute;overflow:hidden;cursor:pointer;touch-action:pan-y;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .5s cubic-bezier(.25,.1,.25,1),box-shadow .5s ease;animation:sc-drift var(--drift-dur,8s) ease-in-out infinite alternate;animation-delay:var(--drift-del,0s)}
.tpl-scattered .sc-img:hover{transform:scale(1.03)!important;box-shadow:0 16px 56px rgba(0,0,0,.5);z-index:5}
.tpl-scattered .sc-img:active{transform:scale(.98)!important;transition-duration:.15s}
.tpl-scattered .sc-img .ik{width:100%;height:100%;display:block}
/* PRODUCTION: real <img> inside .sc-img */
.tpl-scattered .sc-img img.sc-real-img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover;background-position:center}
.tpl-scattered .sc-counter{position:fixed;bottom:48px;left:52px;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.45);pointer-events:none;z-index:12;opacity:0;transition:opacity .5s ease}
.tpl-scattered .sc-counter.on{opacity:1}
@keyframes sc-drift{
  0%{transform:translate(0,0) rotate(var(--r0,0deg))}
  100%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r1,0deg))}
}

/* scattered gallery overlay */
.sc-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:510;background:rgba(0,0,0,.92);opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center}
.sc-overlay.on{opacity:1;pointer-events:auto}
.sc-overlay .sc-ol-img{max-width:88vw;max-height:82vh;object-fit:contain;display:block;cursor:pointer}
.sc-overlay .sc-ol-ph{max-width:88vw;max-height:82vh;display:block;cursor:pointer}
.sc-overlay .sc-ol-close{position:absolute;top:28px;right:28px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);cursor:pointer;z-index:2;padding:8px;transition:color .2s}
.sc-overlay .sc-ol-close:hover{color:#fff}
.sc-overlay .sc-ol-count{position:absolute;bottom:44px;left:52px;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.4)}

/* ── TEMPLATE: CONTACT SHEET (flexible grid + lightbox) ── */
.tpl-contact{padding:100px 52px 80px}
.tpl-contact-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.tpl-contact-title{font-size:clamp(24px,3.5vw,44px);font-weight:300;line-height:1.15;letter-spacing:-.01em}
.tpl-contact-meta{font-size:9px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--l);text-align:right}
.tpl-contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:3px}
.tpl-contact-grid .cs-item{aspect-ratio:4/5;overflow:hidden;cursor:pointer;position:relative}
.tpl-contact-grid .cs-item .ik{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:grayscale(.2)}
.tpl-contact-grid .cs-item:hover .ik{transform:scale(1.06);filter:grayscale(0)}
.tpl-contact-grid .cs-item .cs-num{position:absolute;bottom:6px;right:8px;font-size:8px;font-weight:400;letter-spacing:.15em;color:rgba(255,255,255,.4);mix-blend-mode:difference}
.tpl-contact-grid .cs-item.cs-video::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent rgba(255,255,255,.5);z-index:2}
/* lightbox */
.cs-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;z-index:560;background:rgba(10,10,10,.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.cs-lightbox.on{opacity:1;pointer-events:auto}
.cs-lightbox .cs-lb-img{display:flex;align-items:center;justify-content:center}
.cs-lightbox .cs-lb-img .ik{object-fit:contain}
.cs-lightbox .cs-lb-img .lb-landscape{width:85vw;height:auto;aspect-ratio:3/2}
.cs-lightbox .cs-lb-img .lb-portrait{height:85vh;width:auto;aspect-ratio:2/3}
.cs-lightbox .cs-lb-img .lb-square{height:80vh;width:auto;aspect-ratio:1/1}
.cs-lightbox .cs-lb-img .lb-video{width:85vw;aspect-ratio:16/9;position:relative}
.cs-lightbox .cs-lb-close{position:absolute;top:28px;right:28px;color:#fff;cursor:pointer;font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;transition:opacity .2s}
.cs-lightbox .cs-lb-close:hover{opacity:1}
.cs-lightbox .cs-lb-counter{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.4)}

/* Immersive + Lookbook now share the .tpl-viewer system above */
/* editorial gallery click */
.tpl-ed-gallery .media-item{cursor:pointer;transition:transform .4s var(--ease)}
.tpl-ed-gallery .media-item:hover{transform:scale(.985)}

/* ── Responsive ── */
@media(max-width:860px){
  /* prevent any section from causing horizontal scroll — but NOT .ps (breaks sticky) */
  section:not(.ps),.proj-section{max-width:100vw;overflow-x:hidden;overflow-x:clip}
  .ps{max-width:100vw}
  nav{padding:18px 16px}
  nav.on{padding:10px 16px}
  nav.on .n-inner{max-width:100%;padding:5px 11px}
  .n-r{gap:12px}
  #hero{padding:0 24px 56px}.h-loc{display:none}
  .view-bar{padding:24px 16px 0;margin-top:56px;flex-direction:column;gap:16px;align-items:flex-start}
  .s-label{padding:48px 16px 16px;flex-wrap:wrap}
  .st-spread,.st-domino,.st-mosaic{padding:0;grid-template-columns:1fr}
  .st-spread .pi:first-child,.st-domino .pi:first-child{grid-row:auto}
  .st-mosaic .pi:first-child.port{grid-row:auto}.st-mosaic .pi.land.wide{grid-column:auto}
  .st-mosaic .pi{min-height:auto}
  .st-film{padding:0;flex-wrap:wrap}.st-film .pi{flex:0 0 calc(50% - 2px)}
  .st-scatter,.st-trio{padding:0;flex-wrap:wrap}.st-scatter .pi,.st-trio .pi{flex:0 0 calc(50% - 2px);margin:0!important}
  .st-mag,.st-feature{padding:0}.st-feature .st-row{padding:0}
  .st-mag>.pi:first-child{margin:0;width:100%}
  .st-mag .st-row,.st-feature .st-row{flex-wrap:wrap}.st-mag .st-row .pi,.st-feature .st-row .pi{flex:0 0 calc(50% - 2px)}
  .st-overlap{padding:0;flex-direction:column}.st-overlap .pi{margin:0 0 4px!important;flex:none;width:100%}
  .pi{min-height:280px}
  /* fullbleed stays edge-to-edge on mobile — no padding override */
  .st-fullbleed .pi{min-height:auto}
  .ps-meta{padding:16px 12px 32px;padding-bottom:32px;padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 16px));
    mix-blend-mode:difference;
    background:none;
    border-radius:0;padding-top:48px}
  .ps-meta .ps-tt{color:#fff;text-shadow:none}
  .ps-meta .ps-sb{color:rgba(255,255,255,.85);text-shadow:none}
  .ps-arr{display:block;margin-top:3px;font-size:9px}.divider{width:100%;margin:24px 0}
  .cin-ov{padding:16px}
  .st-stack{height:clamp(700px,72vh,800px);padding:0}
  .st-stack .pi:nth-child(1){width:65%;left:0}.st-stack .pi:nth-child(2){width:48%;right:0}.st-stack .pi:nth-child(3){width:34%;left:30%}
  .st-float{min-height:auto;max-height:none;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 16px;overflow:visible}
  .st-float .fl-overlay{display:none}
  .st-float .fl-item{position:static!important;transform:none!important;width:auto!important;height:auto!important;box-shadow:none;aspect-ratio:4/5;overflow:hidden}
  .st-float .fl-item.land,.st-float .fl-item.sq{aspect-ratio:4/5}
  .st-float .fl-item img,.st-float .fl-item video,.st-float .fl-item iframe{width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important}
  /* Carousel: full-viewport snap on mobile — each item fills screen, no gaps */
  .st-carousel{overflow:hidden}
  .st-carousel .cr-track{padding:0;gap:0}
  .st-carousel .cr-item{height:clamp(500px,140vw,620px);width:100vw;flex:0 0 100vw}
  .st-carousel .cr-item .ik,.st-carousel .cr-item .ik img,.st-carousel .cr-item .ik video,.st-carousel .cr-item .ik iframe{width:100%;height:100%;object-fit:cover}
  /* Hide landscape images in mobile carousels */
  .st-carousel .cr-item.land{display:none}
  /* Marquee: convert to snap-based on mobile — stop CSS animation, full-viewport items */
  .st-marquee{overflow:hidden}
  .st-marquee .mq-track{animation:none!important;gap:0}
  /* split-scroll → single column on mobile */
  .split-wrap{position:static;flex-direction:column;height:auto;overflow:visible}
  .split-col{flex:none!important;overflow:visible;opacity:1!important}
  .split-wrap.col-hover .split-col{opacity:1!important;flex:none!important}
  .split-col-l{border-right:none;border-bottom:1px solid var(--r)}
  .sp-item{opacity:1!important;transform:none!important}
  .sp-item .sp-ov{opacity:1}
  .sp-ov .sp-t{font-size:14px}
  .sp-ov{padding:16px}
  .split-counter{display:none}
  /* index grid responsive */
  #index-view{padding:24px 16px 80px}
  .idx-grid{columns:2;column-gap:12px}
  .idx-item{margin-bottom:12px}
  #about{grid-template-columns:1fr;padding:96px 24px;gap:48px}
  #contact{flex-direction:column;gap:44px;padding:80px 24px 60px;min-height:auto}
  .ct-close{top:24px;right:24px}
  .ct-row{flex-direction:column}
  .ct-row .ct-field:first-child{border-right:none;padding-right:0}
  .ct-row .ct-field:last-child{padding-left:0}
  .ct-submit{flex-direction:column-reverse;gap:32px;align-items:flex-start}
  .ct-links{gap:16px}
  .ct-sub{margin-bottom:40px}
  .contact-page .ct-inner{padding:120px 24px 60px}
  footer{padding:18px 24px;flex-direction:column;gap:6px;align-items:center;text-align:center}
  .mq-item{height:clamp(500px,140vw,620px);width:100vw;flex:0 0 100vw}
  .mq-item .ik,.mq-item .ik img,.mq-item .ik video,.mq-item .ik iframe{width:100%;height:100%;object-fit:cover}
  /* project detail responsive */
  /* project nav responsive */
  .pj-nav{padding:10px 16px}
  .pj-nav-inner{max-width:100%;padding:7px 14px}
  .pj-nav-title{display:none}
  .pj-nav-links{gap:14px}
  .pj-hero{height:70vh}
  .pj-hero-ov{padding:0 24px 48px}
  .pj-drawer{width:100%}
  #pj-drawer-content{padding:72px 28px 48px}
  .pj-drawer-section{padding:22px 0}
  .pj-gallery{padding:40px 24px 0}
  .pj-gal-row{flex-direction:column}
  .pj-related{padding:80px 24px 60px}
  .pj-related-grid{grid-template-columns:1fr 1fr}
  .pj-more{padding:60px 24px 0}
  .pj-more-grid{grid-template-columns:1fr 1fr}
  .pj-more-ov{background:rgba(10,10,10,.35)}
  .pj-more-ov span{opacity:1;transform:translateY(0)}
  .pj-foot{padding:40px 24px;flex-direction:column;gap:20px}
  .st-video .vid-play{width:56px;height:56px}
  .st-flash{height:120vh;height:calc(var(--vh,1vh) * 120)}
  .st-video .vid-bar{padding:14px 20px}
  /* template responsive */
  .tpl-ed-split{grid-template-columns:1fr}
  .tpl-ed-split .tpl-img-col{position:relative;height:60vh}
  .tpl-ed-split .tpl-text-col{padding:60px 24px}
  .tpl-editorial .tpl-credits{margin-top:4px}
  .tpl-ed-row{flex-wrap:wrap}
  .tpl-ed-row .media-item{flex:1 1 100%!important}
  .tpl-ed-row.row-1-p .media-item{flex:0 0 80%!important}
  /* viewer responsive */
  .tv-counter{left:24px;bottom:24px}
  .tv-hero-text{left:24px;bottom:56px}
  .tv-caption{left:24px;right:24px;bottom:28px}
  .tv-frame.is-video .vid-fs{opacity:1}
  .pj-info-fab{right:24px;bottom:24px;padding:9px 16px}
  .tpl-viewer{height:100vh;height:calc(var(--vh,1vh) * 100)}
  .tpl-contact{padding:80px 0 60px}
  .tpl-contact-head{padding:0 16px}
  .tpl-scattered .sc-counter{left:24px;bottom:32px;bottom:max(32px,calc(env(safe-area-inset-bottom) + 12px))}
  .sc-overlay .sc-ol-count{left:24px;bottom:32px;bottom:max(32px,calc(env(safe-area-inset-bottom) + 12px))}
  .sc-overlay .sc-ol-ph{max-width:92vw;max-height:75vh}
  .sc-overlay .sc-ol-close{top:16px;right:16px;padding:14px;font-size:11px}
  /* reduce drift on mobile for perf — smaller translate, slower cycle */
  .tpl-scattered .sc-img{--dx:0px!important;--dy:0px!important;animation-duration:10s!important}
  .tpl-scattered .sc-field{padding:20px 0 80px}
  .tpl-contact-grid{grid-template-columns:repeat(3,1fr);gap:2px}
  .tpl-contact-head{flex-direction:column;align-items:flex-start;gap:12px}
  /* mobile video fullscreen */
  .media-item.is-video .vid-fs{opacity:1;width:36px;height:36px;bottom:10px;right:10px}
  .tv-frame.is-video .vid-fs{opacity:1!important}
  /* contact sheet mobile */
  .cs-lightbox .cs-lb-img .lb-landscape{width:95vw}
  .cs-lightbox .cs-lb-img .lb-portrait{height:70vh}
  .cs-lightbox .cs-lb-img .lb-video{width:95vw}
  /* safe areas for notched phones — with fallbacks */
  footer{padding-bottom:18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  #contact{padding-bottom:60px}
  .pj-info-fab{bottom:24px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 8px))}
  .tv-counter{bottom:24px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 8px))}
  /* prevent iOS zoom on inputs */
  .ct-field input,.ct-field textarea{font-size:16px}
  /* smooth scroll on iOS */
  #proj-detail{-webkit-overflow-scrolling:touch}
  /* hero breathing room */
  #hero{min-height:100vh;min-height:calc(var(--vh,1vh) * 100);padding-bottom:56px}
  /* about section readability */
  .ab-p,.ab-body p{font-size:13px}
}
/* small phones */
@media(max-width:400px){
  .n-r{gap:10px}
  .n-r a{font-size:8px;letter-spacing:.12em}
  .n-id{font-size:9px;letter-spacing:.2em}
  .ct-heading{font-size:24px}
  .ct-links{flex-direction:column;gap:4px}
  .ps-meta{padding:48px 12px 28px;padding-bottom:28px;padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px))}
  .ps-tt{font-size:14px}
  .pj-nav-links{gap:10px}
  .pj-nav-back,.pj-nav-links a{font-size:9px}
  .tpl-contact-grid{grid-template-columns:repeat(2,1fr)}
  .pi{min-height:220px}
  .sc-overlay .sc-ol-ph{max-width:95vw;max-height:72vh}
}
/* touch devices */
@media(hover:none){
  .media-item.is-video .vid-fs{opacity:1}
  .tv-frame.is-video .vid-fs{opacity:1!important}
  .pj-more-ov{background:rgba(10,10,10,.35)}
  .pj-more-ov span{opacity:1;transform:translateY(0)}
  /* prevent long-press callouts on images */
  .ik,.media-item,.tv-frame,.sc-img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
/* WebView-specific fixes (Instagram, Facebook, etc.) */
.is-webview .pj-drawer{width:85vw;max-width:480px}
.is-webview #proj-detail{-webkit-overflow-scrolling:touch}
/* disable smooth scroll in WebViews — can cause jank */
.is-webview{scroll-behavior:auto}
/* ensure sticky works in WebViews — no overflow on .ps ancestors */
.is-webview .ps{overflow:visible!important}
/* extra bottom spacing for Instagram's in-app toolbar */
.is-webview .ps-meta{padding-bottom:52px}

/* mix-blend-mode fallback for older browsers */
@supports not (mix-blend-mode:difference){
  .ps-meta{background:linear-gradient(to top,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 60%,transparent 100%)}
  .ps-meta .ps-tt{color:#fff}
  .ps-meta .ps-sb{color:rgba(255,255,255,.6)}
}
/* touch-action for swipe areas — allow vertical scroll, JS handles horizontal */
.tv-zone-prev,.tv-zone-next{touch-action:pan-y}
.st-marquee{touch-action:pan-y}
.st-carousel{touch-action:pan-y}
.tpl-viewer{touch-action:manipulation}
/* focus-within JS fallback class */
.ct-field.has-focus{border-color:rgba(255,255,255,.4)}

/* backdrop-filter fallback for WebViews that don't support it */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  nav.on .n-inner{background:rgba(14,14,18,.88)!important}
  .pj-nav-inner{background:rgba(245,243,240,.88)!important}
  .pj-nav.on-dark .pj-nav-inner{background:rgba(14,14,18,.82)!important}
  .pj-info-fab{background:rgba(10,10,10,.85)!important}
  .st-video .vid-play{background:rgba(60,60,60,.7)!important}
  .media-item.is-video .vid-indicator::after{background:rgba(60,60,60,.7)!important}
  .media-item.is-video .vid-fs{background:rgba(0,0,0,.65)!important}
}

/* ── Reduced motion: disable animations for accessibility ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .mq-track{animation:none!important}
  .pi{clip-path:inset(0)!important}
  .pi .ik{transform:none!important}
  .st-flash .fl-frame{transition:none!important}
  .tpl-scattered .sc-img{animation:none!important}
  .sp-item{opacity:1!important;transform:none!important}
}

/*
 * ── PRODUCTION PERFORMANCE NOTES ──
 *
 * Image loading (Astro + Sanity):
 * - Sanity CDN auto-generates srcset: ?w=400, ?w=800, ?w=1200, ?w=1600, ?w=2400
 * - Use <Image> component: loading="lazy" decoding="async" on all below-fold
 * - Hero/first marquee: loading="eager" fetchpriority="high" (LCP)
 * - Format: Sanity serves WebP/AVIF via ?fm=webp automatically
 * - Blur placeholder: Sanity's LQIP (low-quality image placeholder) as
 *   base64 data URI in style="background-image:url(data:image/jpeg;base64,...)"
 *
 * Marquee/Carousel images:
 * - Only load images for items within ±1 viewport of scroll position
 * - Use Astro's <Picture> for art-directed crops per breakpoint
 *
 * Flash section:
 * - Preload first 3 frames, lazy-load rest via IO when section approaches
 * - Use small dimensions (1200px max) since frames are visible <200ms each
 *
 * Font loading:
 * - font-display: swap on all @font-face declarations
 * - Preload primary weight: <link rel="preload" as="font" crossorigin>
 *
 * Critical CSS:
 * - Inline above-fold styles (nav, hero, first section) in <head>
 * - Defer remaining CSS via <link rel="preload" as="style" onload="...">
 */