/* ===== Our Works: folder showcase ===== */
.fw{
  --vh:1vh;
  --nav-h:83px;
  --bg:#f4f7f0;--text:#0f0f0f;
  --t1:#ffc640;--t2:#d5d9d2;--t3:#b0b3ad;--mute:#dedfda;--mute-ink:#9b9e98;
  --rh:clamp(190px,calc(var(--vh)*29),300px);
  --iw:clamp(5.5rem,calc(var(--vh)*11),8rem);
  --ih:calc(var(--iw)*1.5);
  --spring:cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
  height:calc(var(--vh)*100 - var(--nav-h));min-height:480px;
  background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;
}
@supports (height:100svh){.fw{--vh:1svh}}

.fw-bar{display:flex;justify-content:space-between;gap:16px;padding:16px clamp(14px,3vw,40px);font:500 .72rem/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}

.tone-1{--c:var(--t1)}
.tone-2{--c:var(--t2)}
.tone-3{--c:var(--t3)}

.fw-stack{position:absolute;bottom:0;left:50%;display:flex;flex-direction:column;width:min(100%,1600px);padding:0 clamp(14px,3vw,40px);transform:translateX(-50%)}
.fw-row{position:relative;height:var(--rh);pointer-events:none}
.fw-row + .fw-row{margin-top:calc(var(--rh)*-.4)}

.fw-folder{position:absolute;inset:0;display:block;color:var(--ink,var(--text));text-decoration:none;pointer-events:none;outline:none;transition:transform .25s var(--spring)}

.fw-tab{position:absolute;top:0;left:28px;z-index:2;display:flex;align-items:center;width:clamp(120px,15vw,190px);height:38px;padding-left:18px;border-radius:12px 0 0 0;background:var(--c);clip-path:polygon(0 0,calc(100% - 36px) 0,100% 100%,0 100%);pointer-events:auto;transition:background-color .25s ease}
.tab-r .fw-tab{left:auto;right:28px;justify-content:flex-end;padding:0 18px 0 0;border-radius:0 12px 0 0;clip-path:polygon(36px 0,100% 0,100% 100%,0 100%)}
.fw-num{font:500 .78rem/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em}

.fw-body{position:absolute;top:36px;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px clamp(18px,2.4vw,32px) 0;border-radius:14px 14px 0 0;background:var(--c);pointer-events:auto;transition:background-color .25s ease}
.fw-body::after{content:"";position:absolute;top:100%;right:0;left:0;height:30px} /* keeps hover steady while the folder lifts */
.fw-title{margin:0;font:400 clamp(2.2rem,calc(var(--vh)*8.5),5.8rem)/1 "DM Sans",sans-serif;letter-spacing:-.045em;text-transform:lowercase;color:inherit}
.fw-meta{padding-top:.7em;font:500 .75rem/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.fw-meta i{font-style:normal}

.fw-folder:focus-visible .fw-body{outline:3px solid var(--text);outline-offset:-3px}

/* the three previews hide behind the folder body */
.fw-previews{position:absolute;top:36px;left:50%;z-index:1;width:min(25rem,64%);height:0;transform:translateX(-50%);pointer-events:none}
.fw-img{position:absolute;top:0;width:var(--iw);height:var(--ih);border-radius:8px;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;will-change:transform;transform:translate(-50%,0) rotate(0deg);transition:transform .25s var(--spring);transition-delay:var(--d-out,0s)}
.fw-img.i1{left:20%;transform-origin:85% 100%;--d-in:0s;--d-out:0s}
.fw-img.i2{left:50%;transform-origin:50% 100%;--d-in:.025s;--d-out:.05s}
.fw-img.i3{left:80%;transform-origin:15% 100%;--d-in:.05s;--d-out:.1s}

/* hover / focus animation: desktop only */
@media (min-width:1001px){
  .fw-folder.is-active{transform:translateY(-25px)}
  .fw-folder.is-active .fw-img{transform:translate(-50%,calc(var(--ih)*-.82)) rotate(var(--rot,0deg));transition-delay:var(--d-in)}
  .fw-stack.has-active .fw-folder:not(.is-active){--c:var(--mute);--ink:var(--mute-ink)}
}

/* tablet + mobile: a compact vertical stack, no hover */
@media (max-width:1000px){
  .fw{--rh:min(280px,calc((var(--vh)*100 - var(--nav-h) - 60px)/2.4))}
  .fw-row + .fw-row{margin-top:calc(var(--rh)*-.3)}
  .fw-previews{display:none}
  .fw-title{font-size:clamp(1.9rem,9vw,3.4rem)}
  .fw-body{flex-direction:column;gap:6px}
  .fw-meta{padding-top:0}
  .fw-tab{left:18px;width:clamp(110px,30vw,160px)}
  .tab-r .fw-tab{left:auto;right:18px}
}
@media (max-width:760px){
  .fw{--nav-h:73px}
  .fw-bar{padding:12px 14px}
}

/* ===== Category pages ===== */
.wkc{padding:40px 0 90px}
.wkc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.wkc-tabs a{padding:9px 18px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);font-size:.88rem;font-weight:600;transition:border-color .2s ease,color .2s ease}
.wkc-tabs a:hover{border-color:var(--primary);color:var(--primary)}
.wkc-tabs a.is-on{border-color:var(--primary);background:var(--primary);color:#fff}
.wkc-empty{padding:60px 0;text-align:center}

.wkc-web{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wkc-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease}
.wkc-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(30,25,80,.12)}
.wkc-shot{aspect-ratio:16/10;overflow:hidden;background:var(--primary-light)}
.wkc-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wkc-card:hover .wkc-shot img{transform:scale(1.06)}
.wkc-info{display:flex;flex-direction:column;gap:6px;padding:20px 22px 24px}
.wkc-tag{color:var(--primary);font:500 .7rem/1 "DM Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}
.wkc-info h3{margin:0;font-size:1.15rem}
.wkc-link{margin-top:8px;color:var(--primary);font-size:.9rem;font-weight:700}
.wkc-soon{margin-top:8px;color:var(--text-muted);font-size:.85rem}

.wkc-posters{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.wkc-poster{display:block;aspect-ratio:3/4;overflow:hidden;padding:0;border:0;border-radius:var(--radius-md);background:var(--primary-light);cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease}
.wkc-poster:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(30,25,80,.18)}
.wkc-poster img{display:block;width:100%;height:100%;object-fit:cover}

.wkc-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.wkc-video{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;padding:0;border:0;border-radius:var(--radius-md);background:#14103a;cursor:pointer}
.wkc-video img{display:block;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.wkc-video:hover img{transform:scale(1.05)}
.wkc-play{position:absolute;top:50%;left:50%;display:grid;width:60px;height:60px;place-items:center;border-radius:50%;background:#fff;color:var(--primary);transform:translate(-50%,-50%);transition:transform .25s ease}
.wkc-play svg{width:26px;height:26px;margin-left:3px}
.wkc-video:hover .wkc-play{transform:translate(-50%,-50%) scale(1.1)}
.wkc-vcap{position:absolute;right:0;bottom:0;left:0;padding:26px 16px 12px;background:linear-gradient(0deg,rgba(10,8,30,.75),transparent);color:#fff;font-size:.9rem;font-weight:600;text-align:left}

/* popup */
.lb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:rgba(10,8,30,.9)}
.lb[hidden]{display:none}
.lb-stage{display:flex;align-items:center;justify-content:center;max-width:100%}
.lb-stage img{max-width:92vw;max-height:80vh;border-radius:12px}
.lb-stage video{max-width:92vw;max-height:80vh;border-radius:12px;background:#000}
.lb-stage iframe{width:min(92vw,1000px);aspect-ratio:16/9;height:auto;border:0;border-radius:12px}
.lb-empty{margin:0;padding:40px;color:#fff}
.lb-cap{margin:0;color:rgba(255,255,255,.85);font-size:.9rem}
.lb-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.26)}

@media (max-width:1000px){.wkc-web{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .wkc-web{grid-template-columns:1fr}
  .wkc-posters{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wkc-videos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fw-folder,.fw-img,.fw-tab,.fw-body,.wkc-card,.wkc-poster,.wkc-shot img,.wkc-video img,.wkc-play{transition:none}
}
.fw-bar a:hover{text-decoration:underline}