/* WORKS — clean grid + marquee + hover stage + modal (FINAL CLEAN) */
body.page-works{background:#f6f1ec;color:#121212;overflow-x:hidden}
body.page-works .brand{color:#121212}
body.page-works .hb span{background:#121212}
body.page-works .menu-btn{color:#121212}
body.page-works .brand-img{filter:invert(1);opacity:.95}
body.page-works .works{padding-top:140px;padding-bottom:70px}

/* WORKS MENU (single) */
body.page-works .ink__ghost{display:none}
body.page-works .ink__drawer::before{content:none;display:none}
body.page-works .ink__backdrop{background:rgba(0,0,0,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.page-works .ink__drawer{background:#fff;border-right:1px solid rgba(0,0,0,.08);box-shadow:0 24px 90px rgba(0,0,0,.18)}
body.page-works .ink__list a{color:rgba(18,18,18,.92);opacity:.62;filter:none}
body.page-works .ink__list:hover a{filter:none}
body.page-works .ink__list li:hover>a{opacity:1;transform:translateX(6px)}
body.page-works .ink__list .current-menu-item>a{opacity:1;transform:translateX(6px)}
body.page-works .ink__list .current_page_item>a{opacity:1;transform:translateX(6px)}
body.page-works .ink__list .current-menu-ancestor>a{opacity:1;transform:translateX(6px)}
body.page-works .ink__corner{color:rgba(18,18,18,.72)}
body.page-works .ink__social{color:rgba(18,18,18,.70)}
body.page-works .ink__sociallink{color:rgba(18,18,18,.70)}
body.page-works .ink__sociallink:hover{color:rgba(18,18,18,.92)}

/* tokens */
:root{--wkR:22px;--wkGap:18px;--wkColW:clamp(260px,18vw,380px);--wkShadow:0 18px 55px rgba(0,0,0,.14)}

/* band / viewport / track */
.works__band{width:100%;position:relative;background:transparent;overflow:visible}
.works__viewport{height:70vh;min-height:520px;max-height:740px;display:flex;align-items:stretch;overflow:visible;position:relative;padding:18px 18px 0}
.works__track{height:100%;display:flex;align-items:stretch;gap:var(--wkGap);padding:0 18px;will-change:transform;transform:translate3d(0,0,0);animation:worksMarquee var(--marqueeDur,28s) linear infinite;position:relative;z-index:1}
@keyframes worksMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--marqueeW,2000px)),0,0)}}

/* blocks */
.wk{flex:0 0 auto;height:100%;display:grid;gap:var(--wkGap);min-height:0}
.wk--mono{width:var(--wkColW);grid-template-rows:1fr}
.wk--duo{width:var(--wkColW);grid-template-rows:1fr 1fr}
.wk--wideHero{width:calc(var(--wkColW)*2 + var(--wkGap));grid-template-rows:1fr}
.wk--wideDuo{width:calc(var(--wkColW)*2 + var(--wkGap));grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.wk--wideL{width:calc(var(--wkColW)*2 + var(--wkGap));grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;grid-template-areas:"big big""s1 s2"}
.wk--wideL .tile--big{grid-area:big}
.wk--wideL .tile--s1{grid-area:s1}
.wk--wideL .tile--s2{grid-area:s2}

/* tile */
.tile{position:relative;display:block;width:100%;height:100%;min-height:150px;border-radius:var(--wkR);overflow:hidden;background:#e7e7e7;box-shadow:var(--wkShadow);border:1px solid rgba(0,0,0,.08)}
.tile img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 18%;filter:contrast(.98) saturate(.98)}
.wk--mono .tile img{object-position:center 26%}
.wk--duo .tile img{object-position:center 26%}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 62%,rgba(0,0,0,.10) 82%,rgba(0,0,0,.20) 100%)}

/* tile polish */
.works__track .tile:hover{box-shadow:0 22px 70px rgba(0,0,0,.18)}
.works__track [data-clone="1"]{opacity:.92;filter:saturate(.98) contrast(.99)}
.works__track [data-clone="1"]:hover{opacity:1;filter:none}

/* hover stage */
.wkstage{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .12s ease;backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.wkstage[aria-hidden="false"]{opacity:1}
.wkstage__backdrop{display:none}
.wkstage__panel{position:absolute;left:0;top:0;width:min(920px,82vw);height:min(620px,72vh);transform:none}
.wkstage__frame{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.28);background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.22)}
.wkstage[aria-hidden="false"] .wkstage__frame{border-color:rgba(255,255,255,.32)}
.wkstage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.10);transition:transform .22s ease}
.wkstage[aria-hidden="false"] .wkstage__img{transform:scale(1.08)}
.wkstage__shade{position:absolute;inset:0;background:rgba(0,0,0,.10)}
.wkstage__meta{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;padding-bottom:14px}
.wkstage__meta::before{content:"";position:absolute;left:-14px;right:-14px;bottom:-12px;height:92%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 20%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.78) 60%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.98) 100%)}
.wkstage__meta::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-10px;height:18px;background:rgba(0,0,0,.55);filter:blur(10px);z-index:0}
.wkstage__title{position:relative;z-index:1;font-size:11px;letter-spacing:.22em;font-weight:850;text-transform:uppercase}
.wkstage__text{position:relative;z-index:1;margin-top:6px;font-size:13px;line-height:1.3;opacity:.92;max-width:52ch}
.wkstage__tags{position:relative;z-index:1;margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.wkstage__tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}

/* modal */
.wkmodal{position:fixed;inset:0;z-index:10000;opacity:0;pointer-events:none;transition:opacity .16s ease}
.wkmodal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.wkmodal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wkmodal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.985);width:min(980px,92vw);max-height:88vh;background:#fbf7f2;color:#121212;border-radius:22px;border:1px solid rgba(0,0,0,.08);box-shadow:0 40px 140px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease}
.wkmodal[aria-hidden="false"] .wkmodal__panel{transform:translate(-50%,-50%) scale(1)}
.wkmodal__x{position:absolute;right:14px;top:12px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.9);color:#121212;cursor:pointer;display:grid;place-items:center;font-size:18px;line-height:1;z-index:5}
.wkmodal__x:hover{background:#fff}
.wkmodal__media{padding:16px 18px 0 18px;flex:0 0 auto}
.wkmodal__video{width:100%;height:clamp(220px,34vh,380px);border-radius:18px;overflow:hidden;background:#f0ebe5;border:1px solid rgba(0,0,0,.08);display:grid;place-items:center}
.wkmodal__video video{width:100%;height:100%;display:block;border:0}
.wkmodal__video iframe{width:100%;height:100%;display:block;border:0}
.wkmodal__placeholder{max-width:52ch;text-align:center;padding:24px}
.wkmodal__placeholder h3{margin:0 0 8px 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.wkmodal__placeholder p{margin:0;font-size:14px;line-height:1.45;opacity:.78}
.wkmodal__body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 22px 22px 22px;scrollbar-gutter:stable}
.wkmodal__title{margin:10px 0 10px 0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;font-size:26px;line-height:1.12;font-weight:850;letter-spacing:-0.01em}
.wkmodal__tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px 0}
.wkmodal__tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.10)}
.wkmodal__go{display:inline-flex;align-items:center;gap:8px;margin:6px 0 14px 0;padding:10px 12px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.10);color:#121212;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.wkmodal__go:hover{border-color:rgba(0,0,0,.18)}
.wkmodal__content{width:100%;border-top:1px solid rgba(0,0,0,.06);padding-top:12px;font-family:ui-serif,Georgia,"Times New Roman",Times,serif;font-size:16px;line-height:1.75;color:rgba(18,18,18,.86);text-align:justify;text-justify:inter-word;hyphens:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wkmodal__content p{max-width:78ch;margin:0 0 12px 0}
.wkmodal__content p:last-child{margin-bottom:0}

/* =========================
   WORKS — RESPONSIVE (CLEAN)
   ========================= */

/* modal mobile */
@media (max-width:640px){.wkmodal__panel{width:94vw;max-height:88vh}.wkmodal__title{font-size:20px;line-height:1.1}.wkmodal__video{height:clamp(200px,30vh,320px)}.wkmodal__content{font-size:15px;line-height:1.7}.wkmodal__tags{margin:0 0 10px 0}.wkmodal__body{padding:14px 18px 18px 18px}.wkmodal__go{position:sticky;top:10px;z-index:3}}

/* <=1024px */
@media (max-width:1024px){:root{--wkColW:clamp(220px,28vw,320px);--wkGap:14px}.works__viewport{height:62vh;min-height:480px;max-height:680px;padding:12px}.works__track{padding:0 12px}.wkstage__panel{width:86vw;height:64vh}}

/* <=768px (mobile swipe mode + kill marquee + hide hover stage) */
@media (max-width:768px){body.page-works .works{padding-top:110px;padding-bottom:40px}:root{--wkColW:76vw;--wkGap:14px}.works__viewport{height:56vh;min-height:420px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-left:14px;scroll-padding-right:14px}.works__viewport::-webkit-scrollbar{display:none}.works__track{animation:none !important;-webkit-animation:none !important;animation-play-state:paused !important;transform:none !important;will-change:auto;padding:0 14px}.wk{scroll-snap-align:start}.wkstage{display:none}.wkstage__panel{display:none}.works__track .tile:active{transform:scale(.992)}}

/* mobile edge fade */
@media (max-width:768px){.works__band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;pointer-events:none;background:linear-gradient(to right,#f6f1ec 0%,rgba(246,241,236,0) 100%);z-index:3}}
@media (max-width:768px){.works__band::after{content:"";position:absolute;right:0;top:0;bottom:0;width:22px;pointer-events:none;background:linear-gradient(to left,#f6f1ec 0%,rgba(246,241,236,0) 100%);z-index:3}}

/* <=560px */
@media (max-width:560px){:root{--wkColW:82vw;--wkR:18px;--wkGap:12px}.works__viewport{height:52vh;min-height:380px}.works__track{gap:12px;padding:0 12px}.tile{border-radius:18px}}

/* <=420px */
@media (max-width:420px){:root{--wkColW:88vw;--wkR:16px;--wkGap:10px}.works__viewport{height:48vh;min-height:340px}.works__track{gap:10px;padding:0 10px}.tile{border-radius:16px}}

/* WORKS — mobile drawer full screen */
@media (max-width:520px){:root{--drawerW:100vw}body.page-works .ink__drawer{width:100vw;max-width:100vw;border-right:0}body.page-works .ink__backdrop{background:rgba(0,0,0,.14)}}